I want to make a date picker as shown in the image below. Can anyone suggest to me which npm package should I use to make such date picker?
date picker
Flatpickr is the one I use in react. You could check if it works with native
Related
I would like to create a box to select the date as in the attached photo.
What do you recommend to create something similar in react native with expo?
I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.
Update:
I created this box to select the date, but when I go to press it gives me an error.
The error is the following:
https://www.npmjs.com/package/#react-native-community/datetimepicker
Works with Expo. Static version set at 3.x.x (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.
expo install #react-native-community/datetimepicker
instead of npm to ensure you get the compatible version.
This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.
I have tried a lot of npm packages but it seems that none of them are compatible with Expo.
I am thinking of building a range slider by myself, but as far as I know, there is no range input component in react native.
What I need is something like this :
https://www.bypeople.com/wp-content/uploads/2019/11/css-js-range-slider.png
How can I achieve this ?
I am using expo version 5.4.12.
Try this
Here is an example of making custom range slider which is compatible with expo sdk
I think you can do this using a slider package (like react-native-multi-slider) and measure the location of the marker using React Native's measure. Combining these two tools you can create an element to be positioned above the marker every time the user interact with slider.
I want to show two label values in one picker component is it possible to display I have attached a screen shot, please let me know if it is possible.
I recommend you to use this library : react-native-dropdown-picker
Installation
npm install react-native-dropdown-picker
here's the documentation
i also created a snack you can check it here
Just replicated my issue here https://snack.expo.io/vER5Zz59S
When running it on android, the date changes to the next day upon clicking the button 'ok' multiple times even though the date in the picker is not changed. Please correct me if I did something wrong. Thanks!
Try removing the prop timeZoneOffsetInMinutes={0}. Which Allows changing of the timeZone of the date picker.
I'm using the native DatePickerAndroid for editing a date field in my react-native app.
I would like to know if there is any support for adding a 'clear' button to the native date picker that will close the datepicker and return an empty date - in order to be able to clear the date in the input field.
I've attached a screenshot of the native android date picker opened from a regular <input/> with type date in chrome. As you can see there is a 'clear' button - exactly what I'm looking for!
Actually this question was previously answered by ufxmeng, but his answer was lately deleted (I don't know why...).
His solution was to create a custom AndroidDatePicker module, mostly copied from the original DatePicker Module created by React Native, with slight changes for adding a CLEAR button.
He put together a github repo holding all files that need to be added/changed to accomplish this. Basically the changes you'll need are here and here.
But note that the original CLEAR button added in that repo doesn't fully match the needs pointed out in my question (see this issue).
So I've changed some of the code to make it work the way I expected. You could see the changes I made in this pull request
It works great for me!
In case anyone else needs this, I forked the original repo of ufxmeng and added Clear button functionality for TimePicker as well:
https://github.com/sladek-jan/CustomDatePicker