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
Related
Is there any React-native library that helps getting the difference between two dates. I mean like the following.
Example
try using moment
import moment from 'moment';
{
moment(date, 'YYYY-MM-DD')
.month(0)
.from(moment().month(0))
}
'YYYY-MM-DD' can be whatever format
this one is getting me the difference between the given date and now
here you can find documentation https://momentjs.com/docs/
and here more libraries https://blog.logrocket.com/4-alternatives-to-moment-js-for-internationalizing-dates/
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.
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!
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.
how do i make up the popup datepicker in dojo which should have seperate dropdown box for year,month..?
I dont think there is a date picker with separate year and month drop downs... I use dojo DateTextBox. The implementation is simple...
require(‘dijit.form.DateTextBox’);
<input type=”text” dojoType=”dijit.form.DateTextBox” name=”date” id=”date”/>
And why would you want separate year and month selectors when its easier for the user to select date from a calendar??? You can take out any part of the date on server side as you please once it is posted....
#Black Rider - it's better if you disable the ability for users to type in a date field. This way, you don't have to worry about validation if they just can select a date from the date picker.
I've had applications where users would need to select a date from many years in the past, e.g. 2002 or even the late nineties. What if you have an app where someone has to enter their birthday?
You could use a jQuery date picker instead, where you can easily add the year.
What Black Rider said is true (and DateTextBox is a great widget), HOWEVER there are also "mobile" dojo widgets that have what you are looking for:
1) "ValuePickerDatePicker" - http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/ValuePickerDatePicker.html#dojox-mobile-valuepickerdatepicker
2) "SpinWheelDatePicker" (very iPhone-y) - http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SpinWheelDatePicker.html#dojox-mobile-spinwheeldatepicker