A React Native date and time picker, using Google's Material Design components

Table of Contents

📙 About The Project

This library is a React Native date & time picker component for Android, using Google’s latest Material Design components. It only works on Android, as iOS has its own native date & time picker components. For iOS, you can use the RNDateTimePicker or DatePickerIOS (deprecated).

(back to top)

⚙️ Getting Started

Prerequisites

• Material Design Components for Android
  • Starting from version 0.2.0, you no longer have to install the Material Design Components library and update your app theme. Please make sure to remove it from your project if you have it installed.

Installation

yarn add react-native-material-datetime-picker

Rebuild the project. Since iOS is not currently supported, running npx pod-install is optional.

(back to top)

Expo Support

This library should work with the EAS development client library, but it has not been tested. For managed projects, a config plugin might be needed. If you would like to contribute a config plugin, please open an issue.

⚒️ Usage (Android)

Imperative API

import { MaterialDatetimePickerAndroid } from 'react-native-material-datetime-picker';

export const App = () => {
  const [date, setDate] = useState(new Date());
  const [time, setTime] = useState(new Date());

  const showTimePicker = () => {
    MaterialDatetimePickerAndroid.show({
      value: time,
      titleText: 'Select flight time',
      mode: AndroidPickerMode.TIME,
      is24Hours: true,
      inputMode: AndroidTimeInputMode.CLOCK,
      onChange: (time) => {
        setTime(time);
      },
    });
  };

  const showDatePicker = () => {
    MaterialDatetimePickerAndroid.show({
      value: date,
      titleText: 'Select booking date',
      mode: AndroidPickerMode.DATE,
      minimumDate: subWeeks(today, 3),
      maximumDate: addWeeks(today, 4),
      inputMode: AndroidDateInputMode.CALENDAR,
      type: AndroidDatePickerType.DEFAULT,
      onChange: (date) => {
        setDate(date);
      },
    });
  };


  return (
    <View>
      <Button onPress={showDatePicker} title="Show date picker" />
      <Button onPress={showTimePicker} title="Show time picker" />
      <Text>Date: {date.toLocaleString()}</Text>
      <Text>Time: {time.toLocaleString()}</Text>
    </View>
  );
};

Declarative API

import RNMaterialDatetimePicker from 'react-native-material-datetime-picker';

export const App = () => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [isVisible, setIsVisible] = useState(false)

  return (
    <View>
      {isVisible &&
        <RNMaterialDatetimePicker
          mode={AndroidPickerMode.DATE}
          value={currentDate}
          minimumDate={subWeeks(today, 3)}
          maximumDate={addWeeks(today, 4)}
          onChange={(date) => {
            setCurrentDate(date);
            setIsVisible(false);
          }}
        />
      }
    </View>
  );
};

Props

Common Options

Date Picker Options

Time Picker Options

(back to top)

🛣️ Roadmap

• Polyfill for iOS and Web
• Theme support

See the open issues for a full list of proposed features (and known issues).

(back to top)

🙋 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag “enhancement”. Don’t forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

📄 License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

🙇 Acknowledgments

• @react-native-datetimepicker/datetimepicker – inspiration for the declarative API

(back to top)

GitHub

View Github