0

I'm using Moment.js with react-datepicker. It works as intended in terms of the date transformation to ISO-8601, but I can't get it compliant with the time.

Here's my component:

Stated initially:

this.state = {
            from: moment().subtract(7, "days"), // Default 1 week back
            to: moment(), // Current date
        };

The component itself:

<DatePicker
    dateFormat="DD-MMM HH:mm"
    dropdownMode="select"
    selected={this.state.from}
    onChange={this.handleFromChange}
/>

And the onchange trigger:

handleFromChange(date) {
    this.setState({
        from : date
    });
}

I think my issue is the dateFormat; The DD-MMM are easily transformed to ISO-8601 by calling using the ECMAScript function toISOString() before posting it to some backend services. But how do I get the time to go with it?

The user(myself, testing) can chance the time on the datepicker itself, but it won't register in the state. Simply it will just pick the current time, or current time 1 week ago(as per the moment from/to initial states). The date, i can change also, but the time remains the same(current time).

How do I change the dateFormat so it takes the time input from the user? How do I make it ISO 8601 compliant per default in the dateFormat attribute?

Edit: I just tested with setting "from" to subtract 5 minutes at such:

this.state = {
            from: moment().subtract(5, "minutes"),
            to: moment(), // Current date
        };

And it formats it correctly when I post it. Seems strange. It must be related to the onChange function then?

cbll
  • 6,499
  • 26
  • 74
  • 117
  • Are there any errors in the console? Did you bound `this` to `handleFromChange`. You can do this by binding it directly (`onChange={this.handleFromChange.bind(this)}`) or in the constructor (`constructor { this.handleFromChange = this.handleFromChange.bind(this) }`); – Slevin Jun 26 '17 at 12:32
  • I've binded the onChange function, no issue there. And no, no errors are logged; everything is processed fine, even the changing dates, but I cannot change the time away from the default time for some reason. But dates work fine. – cbll Jun 26 '17 at 12:32
  • Also, I log the state in the onChange function and the time simply seems locked to the default.. i cant change it at all. – cbll Jun 26 '17 at 12:35
  • Could you provide a Fiddle? – Slevin Jun 26 '17 at 12:37
  • I've created one :) https://codesandbox.io/s/yP5qDgGQz But there is no option to change the time inside the datepicker? – Slevin Jun 26 '17 at 12:43
  • @Slevin thanks! Yes exactly... It will default back to the default moment time when you invoke the function. You can't change and input it. It's kind of strange? Again thanks for fiddling it – cbll Jun 26 '17 at 12:45
  • Ah, so you want to change the time by clicking a date to the current time, right? – Slevin Jun 26 '17 at 12:46
  • Not necessarily. I want it to default to the current time, but allow the user to change it(so that the state updates if they submit this time). right now, the user can't change it(well they can but it doesn't do anything :)) – cbll Jun 26 '17 at 12:49
  • 1
    Oh, so maybe you should use a datetime-picker (like https://codepen.io/simeg/pen/mEmQmP). If you want one that work's automatically, you could go with something like this (very hacky! https://codesandbox.io/s/yP5qDgGQz) – Slevin Jun 26 '17 at 12:57
  • I ran into a similar issue and ended up using this component instead, which seems to have more support for time as well as date: https://github.com/YouCanBookMe/react-datetime – ReLeaf Jun 26 '17 at 12:57
  • Hacky will do I think.. testing it now :P – cbll Jun 26 '17 at 13:00
  • Hacky doesn't work well unfortunately.. i'm off to the other one :) – cbll Jun 26 '17 at 13:02
  • Yep, it just shows the time of the click. Good luck with the other one :) – Slevin Jun 26 '17 at 13:04

1 Answers1

0

Try using dateFormat="dd-MMM hh:mm" and change onChange function to this to avoid error.

handleFromChange(date) {
    this.setState({
        from : date || ""
    });
}
Muhiq kapadia
  • 26
  • 5