CODEWITHSUNDEEP
javascriptreactjsantd
Neeraj narayanan
Neeraj narayanan

Reputation: 301

Antd RangePicker cannot set 12 hour format for Time

I am using Antd RangePicker for showing date range with Time.

By default, the time is the 24hr format. I need to show time in 12hr format. How can I set time in 12-hour format?

<RangePicker
    disabledDate={this.disabledDate}
    showTime={{
    format: 'HH:mm',
    hideDisabledOptions: true,
    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 
    'HH:mm:ss')],
    }}
    format="YYYY-MM-DD HH:mm:ss"
  />

I have tried options like:

use12Hours = {true}

But nothing worked for me. Please help.

Upvotes: 4

Views: 3217

Answers (2)

Hardik G
Hardik G

Reputation: 21

 <RangePicker
  showTime={{ format: 'hh:mm A', use12Hours:true }}
/>

Add 'use12Hours:true' to showTime to change the time picker format.

Upvotes: 2

Vincro
Vincro

Reputation: 248

Ant Design uses momentjs and so you should be able to use the format: 'hh:mm' you may want to add an A, as in format: 'hh:mm A' in order to display the AM/PM time to ensure you do not confuse the person reading the time.

In addition to this you have FORMAT specified twice in your config.

You can read more about displaying times in momentjs here:

http://momentjs.com/docs/#/displaying/

Upvotes: 3

Related Questions