React Native Date Picker Not Letting Me Choose A Date - react-native

I have implemented a react-native-datepicker, and it is displaying correctly and the default date is correct as the initial state is:
date: new Date()
However, when I press the icon to choose a date, all the dates are greyed out, and you can scroll but when you let go it just goes back and won't let you choose a date.
Any idea why I am having this problem?
<DatePicker
style={{width: 200}}
mode="date"
date={this.state.date}
format="DD-MM-YYYY"
minDate={this.state.date}
maxDate="01-01-2030"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(d) => {this.setState({date: d})}}
/>


This is because new Date() isn't in the format you want. new Date() infact returns an Object. It is hard to convert this object to the required format, but here is a link to a solution on Stack Overflow, just in case.
I recommend using libraries like moment.js because it's easy to format dates using it and you can do a lot more.
In your case, I suggest replacing the initial state value to:
{date: moment().format('DD-MM-YYYY')}
Beware! Setting minDate={this.state.date} will restrict you from selecting older dates, i.e once you select a future date, you can never select a date before that again!

Related

is there any date picker package in react-native which supports entering date manually as shown in the image?

Usually date pickers allow users to select any date from the calendar. Besides to that I want to allow user to enter date manually as shown in the image.
Can anybody suggests any RN package that suits my requirement?. Thank You

I would use a masked text input.
Try using this iMask.js - it's very powerful!
https://imask.js.org
With this react-native wrapper for it:
https://github.com/uNmAnNeR/imaskjs/tree/master/packages/react-native-imask
Then it's just a matter of:
<IMaskTextInput
value={someValue}
mask={Date}
min={new Date(1990, 0, 1)}
max={new Date()} // today
lazy={false}
onAccept={(value, mask) => console.log(value)}
/>
See docs of both libraries for more config details.
You can easily extend your own custom TextInput with masking functionality using this wrapper.

assign date value into native base datepicker

Using nativebase datepick:
this.state.date value is 2019-11-15T00:00:00+00:00
<DatePicker
defaultDate={
this.state.date
? new Date(this.state.date) : null
problem is the datepicker show 14 November 2019, because of converting to phone timezone.
I can also use momentjs library.

I think moment.utc(yourDateHere)could help you :)
Here is an example of how it works:
Moment dates example

How to Set TextInput Field Without Using Value - React Native

Is there any way to set the TextInput field without using the value parameter?
I am using _lastNativeText to get data from the field on submission because onChangeText={} and value={} makes typing lag very badly, so instead I am just getting the input without state via _lastNativeText using a ref like this...
<TextInput
ref={(input) => { myTextInput = input }}
/>
Then getting the value with
myTextInput._lastNativeText
This works fine - it is not my favorite solution, but appears to be the only option I have.
This is for a posts feed. So my question is when I want to edit a post, how do I populate the TextInput using some other native function of which I am not aware?
Using setText(postData) and setting value={text} is the obvious answer, but that is not what I want.

Try this
myTextInput.setNativeProps({ text: 'XXXX' })

Datepicker submit format

In the new version of materialize the new 'datepicker' seems to have lost the option for 'formatSubmit'
format: 'dd/mm/yyyy'
formatSubmit: 'yyyy-mm-dd'
You use to be able to display the date in the page in one format and submit it in another.
Anyone have a way round this?

Bootstrap DatePicker setDate method not updating calendar

I'm setting the value of a bootstrap datepicker by making use of the setValue method provided.
For example
tripToDatePicker.setValue(tripFromDatePicker.date);
But for some reason the calendar is not updated

'setValue' is replaced by 'setDate'.
Using a string as input for setDate can be tricky. It has to match with the dateformat, else you can get unexpected results. It is more safe to create a 'new Date(y,m,d)' from your input, e.g. new Date(2015,3,10) for '10 Apr 2015'. This will always work.
When using a date representation in seconds, e.g. 1428659901, then use 'new Date(value*1000)'. Note that datepicker will eat any value here, but only show the selected date in the calendar if hours, minutes and seconds are equal to 0. Took me a while to figure that out....

Edit:
http://www.eyecon.ro/bootstrap-datepicker/ is not much documented, you should try http://eternicode.github.io/bootstrap-datepicker/.
anyway the code below will work for you
$("#dp1").datepicker("update", "02-16-2012");
or
$("#dp1").datepicker("setValue", "02-17-2012");
where "#dpi" is the id of the text field on whcih datepicker is used.

After trying many things, I ended up using "update" method. The $("#dp1").datepicker("update", "02-02-2012") or $("#dp1").datepicker("update", "02/02/2012") works for me. Surprisingly no document about this method at author website. Thanks.