DatePicker

The <DatePicker />component gives your a easy-to-use cross platform date picker leveraging DatePickerAndroid on Android and DatePickerIOS on iOS using an unified API.

• Integrates well in forms as a themable TextInput-like button
• Properly unified API and casted results (aligned on iOS).
• Supports an UTC-mode for tz-proofing the data.

Preview

iOS	Android

Usage

Setup dependencies

Since this components uses a backdrop, you need to wrap your application with a <BackdropProvider /> component. You usually want to wrap it as high as possible in your tree so that the backdrop properly covers the whole screen.

// App.jsx

import React from 'react';
import {BackdropProvider} from 'react-native-propel-kit';

const App: FunctionComponent = () => {
  return (
    <BackdropProvider>
      <RootNavigator />
    </BackdropProvider>
  );
};

export default App;

Basic

The basic API is relatively close to a regular TextInput

// MyComponent.jsx

import React from 'react';
import {Button} from 'react-native';
import {BackdropContext, DatePicker} from 'react-native-propel-kit';

const MyComponent = () => {
  const [date, setDate] = useState(new Date());
  return (
    <View>
      <Text style={{color: 'white', marginBottom: 12}}>Value: {date.toISOString()}</Text>
      <DatePicker title="Pick a date" value={date} onChange={setDate} />
    </View>
  );
};

export default MyComponent;

Props

export type Props = Pick<InputButtonProps, 'placeholder' | 'style'> &
  Pick<ModalDialogProps, 'title' | 'confirmTitle' | 'cancelTitle'> &
  Pick<DatePickerIOSProps, 'mode' | 'locale'> & {
    children?: ReactNode;
    // DatePicker props
    initialValue?: Date;
    InputButtonComponent?: ElementType<InputButtonProps>;
    labelExtractor?: (value: Date, options: LabelExtractorOptions) => string;
    onChange?: (value: Date) => void;
    onSubmitEditing?: (value: Date) => void;
    placeholder?: string;
    value?: Date;
    utc?: boolean;
    androidMode?: DatePickerAndroidOpenOptions['mode'] | TimePickerAndroidOpenOptions['mode'];
    [s: string]: any; // otherInputButtonProps
  };

Defaults

export const defaultProps = {
  androidMode: 'spinner' as DatePickerAndroidOpenOptions['mode'] | TimePickerAndroidOpenOptions['mode'],
  initialValue: FIRST_DAY_OF_YEAR,
  InputButtonComponent: InputButton,
  labelExtractor: defaultLabelExtractor,
  locale: navigator.language,
  mode: 'date' as DatePickerIOSProps['mode'],
  utc: false
};