Search code examples
reactjsreact-datetime

react-datetime timeConstraints for timePicker don't seem to work

I might be missing something here. react-datetime has a lot of functionality. Out of the box the time picker allows you to choose HH MM AM/PM with a picker. I want to get rid of AM/PM, make the hours 0-23, and I want to be able to choose seconds 0-59. I tried the following.

<Datetime input= { false }
    timeConstraints={{ hours: { min: 0, max: 23 }, 
                         minutes: {min:0, max:59}, 
                         seconds: {min:0, max:59} }}
    onChange={dateHandler}
    value={new Date(this.props.state.date)}/>

The choices for picking are still HH MM AM/PM, which is not what I am expecting. I am expecting a picker that allows me to scroll and choose 0-23 (hours), 0-59 (minutes), 0-59 (seconds). I don't want the AM/PM to be there because I want to pick from 0-23 for hours.

Are there other attributes that I need to add to make this work? Any ideas would be appreciated.

Thanks -Andrew

Solution

  • The key is to add timeFormat="HH:mm:ss"

    <Datetime
        input={false}
        timeFormat="HH:mm:ss"
        timeConstraints={{
          hours: { min: 0, max: 23 },
          minutes: { min: 0, max: 59 },
          seconds: { min: 0, max: 59 }
        }}
/>

    Here is a DEMO