All Projects → web-ridge → React Native Paper Dates

web-ridge / React Native Paper Dates

Licence: mit
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Native Paper Dates

Materialdaterangepicker
A material Date Range Picker based on wdullaers MaterialDateTimePicker
Stars: ✭ 1,315 (+660.12%)
Mutual labels:  material, picker, datepicker, timepicker
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+1866.47%)
Mutual labels:  picker, datepicker, timepicker
Pickerjs
⚠️ [Deprecated] No longer maintained. JavaScript date time picker.
Stars: ✭ 299 (+72.83%)
Mutual labels:  picker, datepicker, timepicker
Androidpicker
安卓选择器类库,包括日期及时间选择器(可用于出生日期、营业时间等)、单项选择器(可用于性别、民族、职业、学历、星座等)、二三级联动选择器(可用于车牌号、基金定投日期等)、城市地址选择器(分省级、地市级及区县级)、数字选择器(可用于年龄、身高、体重、温度等)、日历选日期择器(可用于酒店及机票预定日期)、颜色选择器、文件及目录选择器、图片选择器等……WheelPicker/DatePicker/TimePicker/OptionPicker/NumberPicker/LinkagePicker/AddressPicker/CarPlatePicker/CalendarPicker/ColorPicker/FilePicker/ImagePicker etc.
Stars: ✭ 5,320 (+2975.14%)
Mutual labels:  picker, datepicker, timepicker
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (-66.47%)
Mutual labels:  timepicker, datepicker, picker
popoPicker
popoPicker是一个移动端3D滚轮日期时间和单项的选择器,支持无限循环滚动,不依赖第三方库
Stars: ✭ 26 (-84.97%)
Mutual labels:  timepicker, datepicker, picker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+209.83%)
Mutual labels:  picker, datepicker, timepicker
Md2
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
Stars: ✭ 389 (+124.86%)
Mutual labels:  material-design, material, datepicker
Persianrangedatepicker
Persian range date picker for android.
Stars: ✭ 48 (-72.25%)
Mutual labels:  picker, datepicker, timepicker
Datetimepicker
This is a custom android holo datepicker timepicker
Stars: ✭ 56 (-67.63%)
Mutual labels:  picker, datepicker, timepicker
Material Vue Daterange Picker
a date-range-picker follows the Material Design spec powered by vue.js (alpha)
Stars: ✭ 64 (-63.01%)
Mutual labels:  material-design, material, datepicker
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: ✭ 192 (+10.98%)
Mutual labels:  material, picker, datepicker
Material Ui Pickers
Date & Time pickers, built with ❤️ for @material-ui/core
Stars: ✭ 2,291 (+1224.28%)
Mutual labels:  picker, datepicker, timepicker
Primedatepicker
PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days.
Stars: ✭ 292 (+68.79%)
Mutual labels:  material-design, material, datepicker
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+308.67%)
Mutual labels:  picker, datepicker, timepicker
Circularpicker
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter.
Stars: ✭ 73 (-57.8%)
Mutual labels:  picker, datepicker, timepicker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+645.09%)
Mutual labels:  picker, datepicker, timepicker
Amazing Time Picker
Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material
Stars: ✭ 142 (-17.92%)
Mutual labels:  picker, timepicker
Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-20.81%)
Mutual labels:  material-design, material
Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (-2.31%)
Mutual labels:  material, picker

react-native-paper-dates


  • Smooth and fast cross platform Material Design date picker and time picker for (react-native-paper)
  • Tested on Android, iOS and the web
  • Uses the native Date.Intl API's which work out of the box on the web / iOS (automatic day name, month translations without bundle size increase)
  • For Android Intl support please follow the android-caveats guide
  • Simple API
  • Typesafe
  • Endless (virtual) scrolling
  • Performant
  • Great React Native Web support
  • No dependencies outside of (react-native-paper)

Demo of react-native-paper-dates

View video in better frame on YouTube

Web demo: reactnativepaperdates.com

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.

Give us a follow on Twitter: RichardLindhout, web_ridge

Donate

Please contribute or donate so we can spend more time on this library

Donate with PayPal

Getting started

Yarn

yarn add react-native-paper-dates

npm

npm install react-native-paper-dates --save

Usage

Single date Picker

import * as React from 'react';
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';

export default function ReadMeExampleSingle() {
  const [date, setDate] = React.useState<Date | undefined>(undefined);
  const [open, setOpen] = React.useState(false);

  const onDismissSingle = React.useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  const onConfirmSingle = React.useCallback(
    (params) => {
      setOpen(false);
      setDate(params.date);
    },
    [setOpen, setDate]
  );

  return (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick single date
      </Button>
      <DatePickerModal
        // locale={'en'} optional, default: automatic
        mode="single"
        visible={open}
        onDismiss={onDismissSingle}
        date={date}
        onConfirm={onConfirmSingle}
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        // }}
        // onChange={} // same props as onConfirm but triggered without confirmed by user
        // saveLabel="Save" // optional
        // label="Select date" // optional
        // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
      />
    </>
  );
}

Range picker

import * as React from 'react';
import { Button } from 'react-native-paper';

import { DatePickerModal } from 'react-native-paper-dates';

export default function ReadMeExampleRange() {
  const [range, setRange] = React.useState<{
    startDate: Date | undefined;
    endDate: Date | undefined;
  }>({ startDate: undefined, endDate: undefined });

  const [open, setOpen] = React.useState(false);

  const onDismiss = React.useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  const onConfirm = React.useCallback(
    ({ startDate, endDate }) => {
      setOpen(false);
      setRange({ startDate, endDate });
    },
    [setOpen, setRange]
  );

  return (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick range
      </Button>
      <DatePickerModal
        // locale={'en'} optional, default: automatic
        mode="range"
        visible={open}
        onDismiss={onDismiss}
        startDate={range.startDate}
        endDate={range.endDate}
        onConfirm={onConfirm}
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        // }}
        // onChange={} // same props as onConfirm but triggered without confirmed by user
        // locale={'nl'} // optional
        // saveLabel="Save" // optional
        // label="Select period" // optional
        // startLabel="From" // optional
        // endLabel="To" // optional
        // animationType="slide" // optional, default is slide on ios/android and none on web
      />
    </>
  );
}

Multiple dates picker

import * as React from 'react';
import { Button } from 'react-native-paper';

import { DatePickerModal } from 'react-native-paper-dates';

export default function ReadMeExampleMultiple() {
  const [dates, setDates] = React.useState<Date[] | undefined>();
  const [open, setOpen] = React.useState(false);

  const onDismiss = React.useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  const onConfirm = React.useCallback((params) => {
    setOpen(false);
    setDates(params.dates);
    console.log('[on-change-multi]', params);
  }, []);

  return (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick multiple dates
      </Button>

      <DatePickerModal
        // locale={'en'} optional, default: automatic
        mode="multiple"
        visible={open}
        onDismiss={onDismiss}
        dates={dates}
        onConfirm={onConfirm}
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        // }}
        // locale={'nl'} // optional
        // saveLabel="Save" // optional
        // label="Select period" // optional
        // startLabel="From" // optional
        // endLabel="To" // optional
        // animationType="slide" // optional, default is slide on ios/android and none on web
      />
    </>
  );
}

Time picker

import * as React from 'react'
import { Button } from 'react-native-paper'
import { TimePickerModal } from 'react-native-paper-dates'

export default function TimePickerPage() {
  const [visible, setVisible] = React.useState(false)
  const onDismiss = React.useCallback(() => {
    setVisible(false)
  }, [setVisible])

  const onConfirm = React.useCallback(
    ({ hours, minutes }) => {
      setVisible(false);
      console.log({ hours, minutes });
    },
    [setVisible]
  );


  return (
    <>
      <TimePickerModal
        visible={visible}
        onDismiss={onDismiss}
        onConfirm={onConfirm}
        hours={12} // default: current hours
        minutes={14} // default: current minutes
        label="Select time" // optional, default 'Select time'
        cancelLabel="Cancel" // optional, default: 'Cancel'
        confirmLabel="Ok" // optional, default: 'Ok'
        animationType="fade" // optional, default is 'none'
        locale={'en'} // optional, default is automically detected by your system
      />
      <Button onPress={()=> setVisible(true)}>
        Pick time
      </Button>
    </>
  )
}

Roadmap

Things on our roadmap have labels with enhancement. https://github.com/web-ridge/react-native-paper-dates/issues

Tips & Tricks

  • Use 0.14+ version of React-Native-Web (Modal and better number input)
  • Try to avoid putting the Picker Modals inside of a scrollView If that is not possible use the following props on the surrounding ScrollViews/Flatlists
    keyboardDismissMode="on-drag"
    keyboardShouldPersistTaps="handled"
    contentInsetAdjustmentBehavior="always"

This is to prevent the need to press 2 times before save or close button in modal works (1 press for closing keyboard, 1 press for confirm/close) React Native Issue: #10138

Android Caveats

You will need to add a polyfill for the Intl API on Android if:

  • You have Hermes enabled
  • You have Hermes disabled and you want to support locales outside of en-US and you don't have the org.webkit:android-jsc-intl:+ variant enabled in your app/build.gradle

Install polyfills with Yarn

yarn add react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat

or npm

npm install react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat --save

In your app starting entrypoint e.g. ./index.js or even better use a index.android.js to prevent importing on iOS/web put the following code. (don't forget to import the languages you want to support, in the example only english language is supported)

// on top of your index.android.js file
const isAndroid = require('react-native').Platform.OS === 'android';
const isHermesEnabled = !!global.HermesInternal;

// in your index.js file
if (isHermesEnabled || isAndroid) {

  require('@formatjs/intl-getcanonicallocales/polyfill');
  require('@formatjs/intl-locale/polyfill');


  require('@formatjs/intl-pluralrules/polyfill');
  require('@formatjs/intl-pluralrules/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-displaynames/polyfill');
  require('@formatjs/intl-displaynames/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-listformat/polyfill');
  require('@formatjs/intl-listformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-numberformat/polyfill');
  require('@formatjs/intl-numberformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-relativetimeformat/polyfill');
  require('@formatjs/intl-relativetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-datetimeformat/polyfill');
  require('@formatjs/intl-datetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-datetimeformat/add-golden-tz.js');



  // https://formatjs.io/docs/polyfills/intl-datetimeformat/#default-timezone

  if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
  
    // If you are using react-native-cli
    let RNLocalize = require('react-native-localize');
    Intl.DateTimeFormat.__setDefaultTimeZone(RNLocalize.getTimeZone());
    
    //  Are you using Expo, use this instead of previous 2 lines
    //  Intl.DateTimeFormat.__setDefaultTimeZone(
    //    require("expo-localization").timezone
    //  );
  }
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Checkout our other libraries

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].