It would be great to export these prop types. This would make it easier to wrap the components and forward props.

When you click 2 you wil get a 1
After 4 it will work fine.

cc: @Rubenvdveen

i used to use third party libray like react-native-paper...but these makes app bigger so i have started using only react native component...but i like this library...can we use it without react-naive paper

It would be nice to have a boolean that doesn't allow you to click dates before today (i.e. a minDate: new Date()). It could then reduce the opacity of the hidden dates, so users know not to click them.

How can we make an animation like this:
https://kstatic.googleusercontent.com/files/80a00cad3279769beb13b3e77f5617824848eef0312d0c0c5a903b932c6c2503bf7728773f30301c7fdd74d190a6e36f1e17b375e692135729a44e22ecdcf832

Needs to be using the useNativeDriver

Hello! Thanks for the awesome package.
do you plan on adding proper rtl support soon?
the selection indicator is flipped and and selection using mouse is reversed (if I click on 45 it chooses 15 and vice versa)

This is a very urgent bug. The weekdays at the top of the calendar are incorrect, rendering the calendar a bit useless.

Notice the highlighted day in the photo. It says Friday March 6th. But today is Saturday March 6th. Calendars (at least in the US) typically start with a Sunday, so maybe that explains the problem.

Compare with the correct dates from iPhone Calendar:

I have users trying to select dates based on weekdays, and they're choosing the wrong one.

The problem happens on nearly every month. You can see it on the example app: https://www.reactnativepaperdates.com/

Compare it to a calendar and you'll see that the days are wrong.

@RichardLindhout please tell me if I can help solve this somehow. It's really important this gets fixed in order to keep using the library. Thank you!

Hi there,

howdy ? thanks for the wonderful library.
Just landed up with this issue when running the library with a date picker (first example in readme doc).
Can't find variable: Intl (running in a react native android app)
Error shows up in this line. Looks like react native doesnt recognize the standard js libraries like a browser does.
https://github.com/web-ridge/react-native-paper-dates/blob/master/src/Date/CalendarEdit.tsx#L142

Starts Monday or Sunday
According to international standard ISO 8601, Monday is the first day of the week. It is followed by Tuesday, Wednesday, Thursday, Friday, and Saturday. Sunday is the 7th and last day of the week.

Although this is the international standard, several countries, including the United States and Canada, consider Sunday as the start of the week.

Source: https://www.timeanddate.com/calendar/days/#:~:text=Starts%20Monday%20or%20Sunday,last%20day%20of%20the%20week

Hey @RichardLindhout! Awesome library. Is there a way to select multiple dates like the screenshot above?

error getInitialIndex

ExceptionsManager.js:179 TypeError: secondDate.getFullYear is not a function

This error is located at:
in Calendar (at StockForm.js:216)
in RCTView (at View.js:34)
in View (at StockForm.js:188)
in RCTView (at View.js:34)
in View (at StockForm.js:178)
in RCTView (at View.js:34)
in View (at StockForm.js:403)
in RCTView (at View.js:34)
in View (at StockForm.js:402)
in RCTView (at View.js:34)
in View (at ScrollView.js:1124)

ExceptionsManager.js:179 TypeError: secondDate.getFullYear is not a function

This error is located at:
in Calendar (at DatePickerModalContent.tsx:186)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at AnimatedCrossView.tsx:32)
in RCTView (at View.js:34)
in View (at AnimatedCrossView.tsx:31)
in AnimatedCrossView (at DatePickerModalContent.tsx:183)
in DatePickerModalContent (at DatePickerModal.tsx:124)
in RCTView (at View.js:34)
in View (at DatePickerModal.tsx:101)
in RCTView (at View.js:34)
in View (at DatePickerModal.tsx:97)

So they'll have things in another language e.g. on the web, it now automatically detects the language

When going back and typing

e.g.

state 1: 21-10-1996
state 2: 21-10
User types: 1
Should be: 21-10-1
But is: 21-10-

Adding MinDate Prop will be so usefull while selecting Dates Now We Can able to select previous dates also I want the User select after today Dates only

when implementing range picker, the default color is dark purple. Is there a way to modify the color ?

type error: can not read property "prototype" of undefined, js engine: hermes

Hello guys!
I'm facing an issue when I using react-native-paper-dates (lasted version v0.2.12) on React Native + NextJS (SSR).
Could you help me to resolve the problem?
Thank you

E.g. could be if the user is in Thailand but he is ordering something in the Netherlands (if your shop is Dutch) Then you would like to show the calendar in that timezone. (?)

https://material.io/components/time-pickers

Steps to reproduce
Goto date picker
choose manual entry
Enter some invalid values like , or something
App crashes

Is there way to remove the manual entry button or show some error if user enters invalid value

Right now it is hard coded for black and white, allowing for customization of that would be great!

Hello everyone.
I was wondering if you guys have plans to support minutes and seconds mode. It's not on material design docs but it could be useful.

For instance, check this example:
https://material-ui-pickers.dev/demo/timepicker

We now use the code from this PR: necolas/react-native-web#1698

This is the one that is getting merged in the future. Till then I'll use my PR code.
necolas/react-native-web#1646

Some user will want to use their own modals e.g. react-native-navigation modals.

We need to have tests. Especially for the date utils and the grid generator

Hello Team,
Am getting error undefined is not a constructor (evaluating 'new Intl.Locale(locale)') when I run the react-native run-android.
I have run
yarn add react-native-paper-dates
and
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

and My jcsFlavor is: jscFlavor = 'org.webkit:android-jsc:+'

my index.js is

===============================
import { AppRegistry } from 'react-native';
import App from './src/app';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

// //Check for android platform and hermes enabled in order to include polyfills
const isAndroid = require('react-native').Platform.OS === 'android';
const isHermesEnabled = !!global.HermesInternal;

// //If hermises enabled or if it is android include polifills
// //this is required for react-native-papaer-dates
if (isHermesEnabled || isAndroid) {
require('@formatjs/intl-getcanonicallocales/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-relativetimeformat/polyfill');
require('@formatjs/intl-relativetimeformat/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-displaynames/polyfill');
require('@formatjs/intl-displaynames/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-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');

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

// //ToDo: need to check if setting timezone is needed
// // https://formatjs.io/docs/polyfills/intl-datetimeformat/#default-timezone
let RNLocalize = require('react-native-localize');
if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
Intl.DateTimeFormat.__setDefaultTimeZone(RNLocalize.getTimeZone());
}
}

Please help solve the problem.

If i do not change the index.js as mentioned in the readme document, i get an error at the component where i use the picker as: ReferenceError: Can't find variable: Intl

https://github.com/web-ridge/react-native-paper-dates/blob/master/src/CalendarEdit.tsx#L147

Blocked by: necolas/react-native-web#1705

TypeError: onConfirm is not a function. (In 'onConfirm({
startDate: state.startDate,
endDate: state.endDate
})', 'onConfirm' is undefined)

My code;

import React, { Component , useState} from "react";
import { View, Text, StyleSheet, Button} from "react-native";
// import { Button } from 'react-native-paper'
import { DatePickerModal } from 'react-native-paper-dates'
import { onChange } from "react-native-reanimated";

export default class CalendarScreen extends Component {

CALENDAR= ()=>{

console.log("mike")
// setVisible(true)
[visible, setVisible] = React.useState(false).bind(this)
onDismiss = React.useCallback(() => {
  setVisible(false)
}, [setVisible]).bind(this)

  onChange = React.useCallback(({ startDate, endDate }) => {
  setVisible(false).bind(this)
  console.log({ startDate, endDate })


}, [])

}

render(){

return (
  <View style= {styles.container} >
  <Text> CalendarScreen</Text>

  <DatePickerModal
          mode="range"
          visible={this.CALENDAR.visible}
          onDismiss={this.CALENDAR.onDismiss}
          startDate={undefined}
          endDate={undefined}
          //onConfirm={this.CALENDAR.onConfirm}
          onChange= {onChange}
          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
          locale={'en'} // optional, default is automically detected by your system
    
  />
  <Button title="Pick Range" onPress={this.CALENDAR} /> 
    







</View>


)

}

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
height: "100%",
width:"100%"

}
});

The spec is here:
DatePicker: https://material.io/components/date-pickers
TimePicker: https://material.io/components/time-pickers

DoD:

• Uses native Javascript api's as much as possible Intl api's

As Necolas from react-native-web pointed out here it's expected that text is selectable on the web by default.
necolas/react-native-web#1741

We should make a PR to react-native-vector-icons to disable text selecting for their Icon elements to improve the web experience as icons don't really have a use case for selecting.

We should make a PR to react-native-paper to disable selecting their Text element which are in buttons.

Illustration of current behaviour

How to change am-pm to 24 hours format in date picker?

Hi,

First of all wanted to say thank you, this package looks very nice 👍

I think we should have an option to pass modal props such as animationType, presentationStyle instead of hard coded values like this https://github.com/web-ridge/react-native-paper-dates/blob/master/src/DatePickerModal.tsx#L97

Let me know what do you think. I can send a PR if this sounds ok for you

On web, it just renders a red dot (no error message)

On Android, it throws an error:

ReferenceError: Can't find variable: Intl

This error is located at:
    in ForwardRef(CalendarInputPure) (at CalendarEdit.tsx:77)
    in RCTView (at View.js:34)
    in View (at CalendarEdit.tsx:75)
    in RCTView (at View.js:34)
    in View (at CalendarEdit.tsx:74)
    in CalendarEdit (at DatePickerModalContent.tsx:176)

Relevant packages below:

"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-web": "~0.13.12",
"expo": "^40.0.0",
"react-native-paper": "^4.2.0",
"react-native-paper-dates": "^0.2.14",

Relevant code snippets below:

import { DatePickerModal } from 'react-native-paper-dates';
const [dateVisible, setDateVisible] = React.useState(true);
const [eventDate, setEventDate] = React.useState(new Date());

const onDateChange = ({date}) => {
    setDateVisible(false);
    setEventDate(date);
    console.log(date);
  }

return (
    <View>
      <DatePickerModal
        mode="single"
        visible={dateVisible}
        onDismiss={() => setDateVisible(false)}
        date={eventDate}
        onConfirm={onDateChange}
        saveLabel="Save" // optional
        label="Select date" // optional
        animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
      />
  </View>
)

When I pass the prop hours={24} the <TimePicker /> shows 12:00PM, i think it should be 12:00AM, right? Or is this the intended behavior?