naxulanth / react-native-daterange-picker Goto Github PK

View Code? Open in Web Editor NEW

129.0 3.0 85.0 167 KB

A React Native component for picking date ranges or single dates.

License: MIT License

JavaScript 100.00%

react-native daterange daterange-picker datepicker moment range calendar

react-native-daterange-picker's Issues

Controlled isOpen

Hi, is it possible for a future release to get control on the isOpen state by passing a prop
Thank you !

iOS calendar date range selection is not working ?

Calendar date range selection is not working

Toggle

It would be interesting to have a function that I call when clicking on the backdrop to close. So a toggle could be created manually.

Does not Contain @types

I was trying to use this picker with react-native + typescript. It unfortunately does not work as it does not have types folder for the same,

Can't position if I use it on Navigationbar

When I use that component in navigationbar (example; headerRight) It doesnt work.

It opens popup outside of the screen.
Worked so much to fix with CSS but couldnt solve.

Pre-defined buttons inside popup?

Is that possible to put some "pre-defined" buttons like "last month, this month, this year, previous week" etc.?

Couldnt find any way, to put it into the popup.

unable to npm install react version need to updated from react@"^16.13.1" to onward

`$ npm i react-native-daterange-picker
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-native-daterange-picker
npm ERR! react-native-daterange-picker@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\USER\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Local\npm-cache_logs\2022-05-04T14_10_54_989Z-debug.log`

Render without a child: I control the open state programmatically (not via user interaction) so it would be nice to include the picker without the default button. I currently use the following workaround to stop rendering the default "show"-button:
<DateRangePicker onChange={this.setDates} endDate={endDate} startDate={startDate} displayedDate={displayedDate} open={isDatePickerOpen} range> <></> </DateRangePicker>
Support of TypeScript would be nice (add a typescript declaration file and link it in you package.json - I think this should work: https://stackoverflow.com/a/51573845/6003494)
OnBackdropClick-Handler (clicking the backdrop (Black Background when the calendar is open) should fire an event, so I can handle it in my app)

If I have time the next days and you like the ideas I can contribute a PR for this issue.

Best regards
Marco

Thanks

Alex

Custom Labels when presetButtons for buttons (Today / This Week / This Month) is enabled

Hi, Is it possible to implement this to use the preset buttons in other languages?

Type, new props as presetButtonTodayText="Custom text for the button"

Changing to hooks crash at 'displayedDate'

If you are trying to write the code for React Hooks the module will crash at 'displayedDate'.

My code:

const [date, setDate] = useState({ startDate: null, endDate: null, displayedDate: moment() })

    const setDates = dates => {
        setDate({ ...dates })
    }

<DateRangePicker
         open={open}
         onChange={dates => setDates(dates)}
         endDate={date.startDate}
         startDate={date.endDate}
         displayedDate={date.displayedDate}
         range
/>

After the component is opened, when you click on a date will throw the next error:

TypeError: undefined is not an object (evaluating 'displayedDate.format')

This error is located at:
    in DateRangePicker (at DMScanListSceen.js:158)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at TouchableOpacity.js:224)
    in TouchableOpacity (at TouchableOpacity.js:302)
    in ForwardRef (at DMScanListSceen.js:157)
    in RCTView (at View.js:34)
    in View (at DMScanListSceen.js:119)
    in DMScanListScreen
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:620)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:84)
    in MaybeScreen (at CardStack.tsx:613)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:54)
    in MaybeScreenContainer (at CardStack.tsx:495)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at DMScanListNavigator.js:23)
    in DMScanListNavigator (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:68)
    in RCTView (at View.js:34)
    in View (at ResourceSavingScene.tsx:63)
    in ResourceSavingScene (at DrawerView.tsx:183)
    in RCTView (at View.js:34)
    in View (at src/index.native.js:123)
    in ScreenContainer (at DrawerView.tsx:162)
    in RCTView (at View.js:34)
    in View (at Drawer.tsx:645)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:638)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:240)
    in AnimatedComponent(View) (at Drawer.tsx:628)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Drawer.tsx:619)
    in DrawerView (at DrawerView.tsx:215)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at DrawerView.tsx:213)
    in RCTView (at View.js:34)
    in View (at DrawerView.tsx:212)
    in DrawerView (at createDrawerNavigator.tsx:47)
    in DrawerNavigator (at DMDrawerNavigator.js:22)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at DMDrawerNavigator.js:21)
    in DrawerAppContainer (at App.js:119)
    in App (at Danny/index.js:10)
    in DMAppProvider (at Danny/index.js:9)
    in ProvideApp (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

naxulanth / react-native-daterange-picker Goto Github PK

react-native-daterange-picker's Issues

Recommend Projects

Recommend Topics

Recommend Org