I have just started using the react-day-picker library. I have the following code sandBox which is a fork of the range with 2 inputs example,
https://codesandbox.io/s/w6vnlox29l
I have it working the way I want but I want to input the dates as MM/DD/YYYY instead of the default format, YYYY-MM-DD. When I add the following attributes
<DayPickerInput
value={from}
format="M/D/YYYY"
formatDate={formatDate}
parseDate={parseDate}
placeholder="MM/DD/YYYY"
onDayChange={this.handleFromChange}
dayPickerProps={{
selectedDays: [from, { from, to }],
modifiers,
disabledDays: {
after: new Date(),
},
numberOfMonths: 2,
toMonth: new Date(),
}}
/>
I can no longer correctly enter the date in the input field the date. When I remove the format, formatDate and parseDate attributes the date picker input functions the way I expected. I have read the documentation but think I may be missing something simple. How can I use the input text box and date picker with dates formatted as MM/DD/YYYY?
Related
I am using the html input type date on a form in react. Previously when encountering issues with the javascript date object and getting it to display correctly, I used the method of .replace(/-/g, "/") and the day passed in would be displayed correctly.
I am making a new app and trying the same thing and receiving the following error basically copying and pasting lines of code.
The specified value "2021/07/06" does not conform to the required format, "yyyy-MM-dd".
So apparently you are required to do a timezone offset to get the date object to correctly display in react?
Here is what i am trying to do to get a proper date to display in the value of the date picker:
<input
type='date'
name='startDate'
value={startDisplay != null && startDisplay}
id=''
onChange={(e) => {
setStartDate(e.target.value);
setStartDisplay(
Intl.DateTimeFormat({
year: "numeric",
month: "numeric",
day: "numeric",
})
.format(new Date(startDate))
.replace(/-/, "/")
.replace(/-/, "/")
);
}}
/>
I'm wondering if there is a fix that allows the replace method to work, or if someone can help me write a function for setDisplayDate that properly uses timezoneoffset.
or should I just suck it up and add the date picker library?
I have tried to change the value of selection in angular material date picker to YYYY-MM-DD format as follows:
In dateInput event of the field I call a function which will change the format of date using date pipe and set value back. However, the format doesnt change.
HTML Code
<input matInput placeholder="Stop Date" [matDatepicker]="stopDate" (dateInput)="OnStopDate($event.value)" formControlName="stopDate">
<mat-datepicker-toggle matSuffix [for]="stopDate"></mat-datepicker-toggle>
<mat-datepicker #stopDate></mat-datepicker>`
TS Code
`OnStopDate(Value){
const update= this.datepipe.transform(Value, 'YYYY-MM-dd'); //this value is being update
this.myForm.controls.stopDate.setValue(update,{emitEvent: false}); // the value is not being set in yyyy-mm-dd but in mm-dd-yyyy
}
I did see a solution provided using MomentDateAdapter as here. Is this the only solution proceed and why ?
React-Horizontal-Timeline requires input date as YYY-MM-DD but I only want to display YYYY
Based on the docs, it looks like you need to provide a sorted list of dates in yyyy-mm-dd format. Then you write a getLabel function that React-Horizontal-Timeline can use to derive the label from those dates.
<HorizontalTimeline
values=['1984-10-10', '1985-11-10', '1986-10-10']
getLabel={function(date) { return date.slice(0, 4); }}
...remaining props
/>
Here I am using the .slice method to extract yyyy from yyyy-mm-dd.
I Am trying to format a date from react datepicker, the value going in is 1441062000000
onChangeStartDate: function(value) {
this.setState({
startDate: moment(value)
})
},
When I check the date in dev tools I get a moment invalid date, can anyone tell me how I can create a date from the value?
I'm using the value 1443135600000 with format, but still getting invalid date:
onChangeEndDate: function onChangeEndDate(value) {
console.log(moment(value, ConfigProvider.getKey('dateFormat')));
You might need to pass the format as a second argument to moment - in case of react date picker, it defaults to 'x', e.g. unix timestamp:
this.setState({
startDate: moment(value, 'x')
})
If you omit the second argument, moment tries to parse the input by looking for ISO 8601 formats, but a unix timestamp will cause this algorithm to fail. That's why you need to specify the format explicitly.
The other way would be to configure your date picker to emit changes in an IS 8601 compliant format, for example format='YYYY-MM-DD'.
I'm using angular-pikaday plugin (https://github.com/nverba/angular-pikaday) and I have a problem with a date formatting.
What I need to get is a model with a string of date in format YYYY-MM-dd.
I've installed Moment.js through bower (as documentation says that it's needed). Part of code looks like this (angular-pikaday.coffee)
picker = new Pikaday(
field: elem[0]
trigger: document.getElementById(attrs.triggerId)
bound: attrs.bound isnt "false"
position: attrs.position or ""
format: "YYYY-MM-dd" # Requires Moment.js for custom formatting
defaultDate: new Date()
setDefaultDate: attrs.setDefaultDate is "true"
firstDay: 1
( ... )
How can I put formatted date inside ng-model passed in HTML?
Date = {{ myPickerObject.getDate() | date:'YYYY-MM-dd' }}
UPD:
$filter('data')(myPickerObject.getDate(), 'YYYY-MM-dd' )