feat: add date picker input

Author: RichardLindhout

README.md

@@ -13,8 +13,8 @@
 
 - Smooth and fast cross platform Material Design **date** picker and **time** picker for ([react-native-paper](https://callstack.github.io/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](https://github.com/web-ridge/react-native-paper-dates#android-caveats)
+- Uses the native Date.Intl API's which work out of the box on the web / iOS an on Android with Hermes from RN version 0.66 (automatic day name, month translations without bundle size increase)
+- For RN below 0.66 see for Android Intl support the [android-caveats guide](https://github.com/web-ridge/react-native-paper-dates#android-caveats)
 - Simple API
 - Typesafe
 - Endless (virtual) scrolling
@@ -282,19 +282,14 @@ This is to prevent the need to press 2 times before save or close button in moda
 [React Native Issue: #10138](https://github.com/facebook/react-native/issues/10138)
 
 ## Android Caveats
-
-
-
+We recommend Hermes with React Native >= 0.66 you won't need these polyfills at all!
+### Below React Native 0.66
 You will need to add a polyfill for the Intl API on Android if:
 
-- You have [Hermes](https://github.com/facebook/hermes/issues/23) enabled
+- You have [Hermes](https://github.com/facebook/hermes/issues/23) enabled and are below React Native 0.66
 - You have [Hermes](https://github.com/facebook/hermes/issues/23) 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
 
 
-*update*: [Hermes is planning on native Intl support in version 0.65!](https://github.com/facebook/hermes/issues/23#issuecomment-816126715) when that's released we won't need any polyfills anymore!   
-
-But for now.   
-
 Install polyfills with Yarn
 
 ```

example/index.js

@@ -1,8 +1,8 @@
 import { registerRootComponent } from 'expo'
 
-import App from './src/'
+import Index from './src'
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in the Expo client or in a native build,
 // the environment is set up appropriately
-registerRootComponent(App)
+registerRootComponent(Index)

example/src/App.tsx

@@ -26,12 +26,11 @@ import {
   DatePickerModal,
   DatePickerModalContent,
   TimePickerModal,
-  // @ts-ignore
+  DatePickerInput,
+  // @ts-ignore TODO: try to fix expo to work with local library
 } from 'react-native-paper-dates'
-import DatePickerInput from '../../src/Date/DatePickerInput'
 
 function App() {
-  // I18nManager.forceRTL(true);
   const theme = useTheme()
   const dateFormatter = new Intl.DateTimeFormat(undefined, {
     day: 'numeric',
@@ -43,6 +42,8 @@ function App() {
     minute: '2-digit',
     hour12: false,
   })
+  const [inputDate, setInputDate] = React.useState<Date | undefined>(undefined)
+
   const [date, setDate] = React.useState<Date | undefined>(undefined)
   const [dates, setDates] = React.useState<Date[] | undefined>()
   const [range, setRange] = React.useState<{
@@ -119,6 +120,7 @@ function App() {
       ? overlay(3, theme.colors.surface)
       : (theme.colors.surface as any)
 
+  const locale = 'nl'
   return (
     <>
       <ScrollView
@@ -188,7 +190,12 @@ function App() {
             <Row>
               <Label>Input</Label>
               <Text>
-                <DatePickerInput />
+                <DatePickerInput
+                  locale={locale}
+                  value={inputDate}
+                  onChange={setInputDate}
+                  inputMode="start"
+                />
               </Text>
             </Row>
             <Row>
@@ -282,7 +289,7 @@ function App() {
         {customOpen ? (
           <View style={[StyleSheet.absoluteFill, styles.customModal]}>
             <DatePickerModalContent
-              // locale={'en'} optional, default: automatic
+              locale={locale}
               mode="range"
               onDismiss={onDismissCustom}
               startDate={range.startDate}
@@ -294,7 +301,7 @@ function App() {
       </Portal>
 
       <DatePickerModal
-        // locale={'en'} optional, default: automatic
+        locale={locale}
         mode="range"
         visible={rangeOpen}
         onDismiss={onDismissRange}
@@ -310,7 +317,7 @@ function App() {
       />
 
       <DatePickerModal
-        // locale={'en'} optional, default: automatic
+        locale={locale}
         mode="single"
         visible={singleOpen}
         onDismiss={onDismissSingle}
@@ -326,7 +333,7 @@ function App() {
       />
 
       <DatePickerModal
-        // locale={'en'} optional, default: automatic
+        locale={locale}
         mode="multiple"
         visible={multiOpen}
         onDismiss={onDismissMulti}
@@ -343,7 +350,7 @@ function App() {
       />
 
       <TimePickerModal
-        locale={'nl'} //optional, default: automatic
+        locale={locale}
         visible={timeOpen}
         onDismiss={onDismissTime}
         onConfirm={onConfirmTime}
@@ -435,7 +442,7 @@ const styles = StyleSheet.create({
     marginTop: 24,
     padding: 24,
     alignSelf: 'center',
-    flex: 1,
+    // flex: 1,
   },
   contentInline: {
     padding: 0,

example/src/index.android.ts

@@ -1 +1,11 @@
-import './App'
+import {
+  en,
+  nl,
+  registerTranslation,
+  // @ts-ignore TODO: try to fix expo to work with local library
+} from 'react-native-paper-dates'
+registerTranslation('en', en)
+registerTranslation('nl', nl)
+
+import App from './App'
+export default App

example/src/index.ts

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-
 import Swiper from './Swiper'
-
 import Month from './Month'
 import {
   areDatesOnSameDay,
@@ -37,6 +35,7 @@ export type BaseCalendarProps = {
   dates?: CalendarDates
   startDate?: CalendarDate
   endDate?: CalendarDate
+  dateMode?: 'start' | 'end'
 }
 
 export type CalendarDate = Date | undefined
@@ -47,15 +46,15 @@ export type RangeChange = (params: {
   endDate: CalendarDate
 }) => any
 
-export type SingleChange = (params: { date: CalendarDate }) => any
+export type SingleChange = (params: { date: CalendarDate }) => void
 
 export type MultiChange = (params: {
   dates: CalendarDates
   datePressed: Date
   change: 'added' | 'removed'
 }) => any
 
-export type MultiConfirm = (params: { dates: Date[] }) => any
+export type MultiConfirm = (params: { dates: Date[] }) => void
 
 export interface CalendarSingleProps extends BaseCalendarProps {
   mode: 'single'
@@ -89,6 +88,7 @@ function Calendar(
     disableWeekDays,
     dates,
     validRange,
+    dateMode,
   } = props
 
   const theme = useTheme()
@@ -128,7 +128,7 @@ function Calendar(
     (d: Date) => {
       if (mode === 'single') {
         ;(onChangeRef.current as SingleChange)({
-          date: d,
+          date: dateMode === 'start' ? d : getEndDate(d),
         })
       } else if (mode === 'range') {
         const sd = startDateRef.current
@@ -139,9 +139,7 @@ function Calendar(
         }
         ;(onChangeRef.current as RangeChange)({
           startDate: isStart ? d : sd,
-          endDate: !isStart
-            ? new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
-            : undefined,
+          endDate: !isStart ? getEndDate(d) : undefined,
         })
       } else if (mode === 'multiple') {
         datesRef.current = datesRef.current || []
@@ -159,10 +157,11 @@ function Calendar(
         })
       }
     },
-    [mode, onChangeRef, startDateRef, endDateRef, datesRef]
+    [mode, dateMode, onChangeRef, startDateRef, endDateRef, datesRef]
   )
 
   const firstDate = startDate || date || dates?.[0]
+
   return (
     <View style={styles.root}>
       <Swiper
@@ -211,6 +210,10 @@ function Calendar(
   )
 }
 
+function getEndDate(d: Date) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1 },
   viewPager: { flex: 1 },