React Native Material Design Datepicker

Screenshots

Installation

npm install react-native-mdc-datepicker --save

or

yarn add react-native-mdc-datepicker

MDCDatePicker Api

import { MDCDatePicker } from "react-native-mdc-datepicker"

MDCDatePicker.present(options ? : PickerDefaultOptions)
:
Promise <Date>

MDCDatePicker.presentRange(options ? : PickerRangeOptions)
:
Promise <{ start: Date, end: Date }>

MDCTimePicker Api

import { MDCTimePicker } from "react-native-mdc-datepicker"

MDCTimePicker.present(options ? : TimePickerOptions)
:
Promise <{ hour: number, minute: number }>

DatePicker Usage (Declarative Api)

import { DatePicker } from 'react-native-mdc-datepicker';

const [visible, setVisible] = useState(false);
const [selected, setSelected] = useState<Date | null>(null);

return (
  <DatePicker
    visible={visible}
    onClose={() => setVisible(false)}
    value={selected}
    minDate={minDate}
    dynamicColors
    maxDate={maxDate}
    onSelect={setSelected}
  />
)

DateRangePicker Usage (Declarative Api)

import { DatePicker } from 'react-native-mdc-datepicker';

const [visible, setVisible] = useState(false);
const [selectedRange, setSelectedRange] = useState<{
  start: Date | null;
  end: Date | null;
}>({ start: null, end: null });

return (
  <DatePicker
    mode="range"
    visible={visible}
    onClose={() => setVisible(false)}
    minDate={minDate}
    maxDate={maxDate}
    onSelect={setSelectedRange}
    {...selectedRange}
  />
)

TimePicker Usage (Declarative Api)

import { TimePicker, type TimePickerResult } from 'react-native-mdc-datepicker';

const [visible, setVisible] = useState(false);
const [time, setTime] = useState<TimePickerResult | null>(null)
return (
  <TimePicker
    visible={visible}
    onClose={() => setVisible(false)}
    format="24"
    mode="clock"
    onSelect={setTime}
  />
)

Usage (Imperative Api)

const [selected, setSelected] = useState<Date | null>(null);

const [selectedRange, setSelectedRange] = useState<{
  start: Date | null;
  end: Date | null;
}>({ start: null, end: null });

const presentDefault = async () => {
  try {
    const date = await MDCDatePicker.present();
    setSelected(date);
  } catch (err) {
  }
}

const presentRange = async () => {
  try {
    const value = await MDCDatePicker.presentRange();
    setSelectedRange(val);
  } catch {
  }
}

Picker Options

| Prop | Type | Required | Description | |---------------|----------------------------------------|----------|-----------------------------------------------------| | value | Date or null | NO | Selected value | | initialDate | Date | NO | Initially selected value | | minDate | Date | NO | Minimum date that can be selected | | maxDate | Date | NO | Maximum date that can be selected | | fullScreen | boolean (default - false) | NO | If true datepicker will be presented in full screen | | dynamicColors | boolean (default - false) | NO | If true will aplly system dynamic colors | | title | string | NO | Title of the picker | | confirmText | string | NO | Confirm text of the picker | | cancelText | string | NO | Cancel text of the picker | | theme | 'system'(default) | 'dark' | 'light' | NO | Defines picker theme |

Range Picker Options

| Prop | Type | Required | Description | |---------------|----------------------------------------|----------|-----------------------------------------------------| | start | Date or null | NO | Selected start value | | end | Date or null | NO | Selected end value | | initialStart | Date | NO | Initially selected value for start | | initialEnd | Date | NO | Initially selected value for end | | minDate | Date | NO | Minimum date that can be selected | | maxDate | Date | NO | Maximum date that can be selected | | fullScreen | boolean (default - true) | NO | If true datepicker will be presented in full screen | | dynamicColors | boolean (default - false) | NO | If true will aplly system dynamic colors | | title | string | NO | Title of the picker | | confirmText | string | NO | Confirm text of the picker | | theme | 'system'(default) | 'dark' | 'light' | NO | Defines picker theme |

TimePicker Options

| Prop | Type | Required | Description | |---------------|----------------------------------------|----------|------------------------------------------| | value | {hour, minute} | null | NO | Selected time | | initialTime | {hour, minute} | null | NO | Initially selected time | | format | '24' or '12' | NO | Defines time format of the picker | | mode | 'input' or 'clock' | NO | Defines start mode of the picker | | dynamicColors | boolean (default - false) | NO | If true will aplly system dynamic colors | | title | string | NO | Title of the picker | | confirmText | string | NO | Confirm text of the picker | | cancelText | string | NO | Cancel text of the picker | | theme | 'system'(default) | 'dark' | 'light' | NO | Defines picker theme |

Customization

For customization pickers you need to define styles in your src/main/res/values/styles.xml

For different themes will be used different styles

You can learn about picker customization on resources: Date picker, Time picker

Date Picker

<!-- theme = 'system' fullScreen={false}  -->
<style name="MaterialCalendarTheme" parent="BaseMaterialCalendarTheme"></style>
  <!-- theme = 'light' fullScreen={false}  -->
<style name="MaterialCalendarLightTheme" parent="BaseMaterialCalendarTheme"></style>
  <!-- theme = 'dark' fullScreen={false} -->
<style name="MaterialCalendarDarkTheme" parent="BaseMaterialCalendarTheme"></style>

<!-- theme = 'system' fullScreen={true} -->
<style name="MaterialCalendarFullScreenTheme" parent="BaseMaterialCalendarFullScreenTheme"></style>
  <!-- theme = 'dark' fullScreen={true} -->
<style name="MaterialCalendarFullScreenDarkTheme" parent="BaseMaterialCalendarFullScreenTheme"></style>
  <!-- theme = 'light' fullScreen={true} -->
<style name="MaterialCalendarFullScreenLightTheme" parent="BaseMaterialCalendarFullScreenTheme"></style>

Time Picker

  <!-- theme = 'system' -->
<style name="MaterialTimePickerTheme" parent="BaseMaterialTimePickerTheme"></style>
  <!-- theme = 'dark' -->
<style name="MaterialTimePickerDarkTheme" parent="BaseMaterialTimePickerTheme"></style>
  <!-- theme = 'light' -->
<style name="MaterialTimePickerLightTheme" parent="BaseMaterialTimePickerTheme"></style>

Example

<DatePicker
  theme="light"
/>

<style name="MaterialCalendarLightTheme" parent="BaseMaterialCalendarTheme">
  <item name="colorPrimary">#809A54</item>
  <item name="colorOnPrimary">#3B333D</item>
  <item name="colorSurface">#FFFFFF</item>
  <item name="colorOnSurface">#3B333D</item>
  <item name="colorOnSurfaceVariant">#809A54</item>
</style>

<DatePicker
  theme="dark"
/>

<style name="MaterialCalendarDarkTheme" parent="BaseMaterialCalendarTheme">
  <item name="colorPrimary">#007AFF</item>
  <item name="colorOnPrimary">#FFFFFF</item>
  <item name="colorSurface">#241f28</item>
  <item name="colorOnSurface">#FFFFFF</item>
  <item name="colorOnSurfaceVariant">#007AFF</item>
</style>