If I select a date in a <DateInput>
, the datetime is in the user's timezone (e.g. 2017-07-01T00:00:00.000+02:00) but when it's sent to the server, it's transformed to UTC and thus ends up as 2017-06-30T22:00:00.000Z, one day behind.
The underlaying back-end is unaware of the user's timezone and cannot shift the dates back so after stripping the time it ends up with wrong date.
Any of these options would work fine:
DateInput
documentation and haven't found any option to alter the behaviour.DateTimeFormat
but despite a couple of tries I got nowhere.Material UI date and timepickers return the local values. You can write a function in their onChange function to reformat the date to any value.
handleTimeInput = (event, time) => {
this.setState({
time: time
})
}
You can then reset the time you send to server by using a simple function like the one below to convert local time to UTC
export default (date) => {
return new Date(date.getTime() + date.getTimezoneOffset()*60000)
}
(for displaying)
export default (date) => {
const tempDate = new Date(date)
return new Date(tempDate.getTime() - tempDate.getTimezoneOffset()*60000)
}
This is the entire component code for my comp.
class DateTimePicker extends Component {
constructor(props) {
super(props);
this.state = {
date: null,
time: null
};
}
handleDateInput = (event, date) => {
this.setState({
date: date
})
}
handleTimeInput = (event, time) => {
this.setState({
time: time
})
}
componentDidUpdate(prevProps, prevState) {
const {setSchedule, channel} = this.props
if (prevState.date !== this.state.date || prevState.time !== this.state.time) {
if (this.state.date && this.state.time) {
setSchedule(convertISTtoUTC(concatenateDateAndTime(this.state.date, this.state.time)), channel)
}
}
}
render() {
return (
<div >
<DatePicker autoOk={true} onChange={this.handleDateInput} />
<TimePicker autoOk={true} pedantic={true} onChange={this.handleTimeInput} />
</div>
)
}
}
With this you have 2 options.
1) you can hook this to redux directly and shoot actions when both are selected.
https://marmelab.com/admin-on-rest/Actions.html
2) Write your own Input component
https://marmelab.com/admin-on-rest/Inputs.html#writing-your-own-input-component