DatePicker 12 hour am/pm format?

[acomito]

What problem does this feature solve?

Common to use 12 hour am/pm format in the US, rather than military time.

What does the proposed API look like?

Either allow to pass in hh to the format, or have a prop (like antd web) 12hour={true}

[SpringsTea]

Doesn't appear to be working for me.

<DatePicker  
   showTime  
   use12Hours = {true} 
   allowClear={false}  
   format="YYYY-MM-DD HH:mm"  
   defaultValue={ moment(value) }   
   onChange={handleChange}/>

Still showing 24 hour time

[yingdongzhang]

@SpringsTea are you using React Native? It only works on web. https://mobile.ant.design/components/date-picker/

[SpringsTea]

Ah I see. For anyone else who gets stuck here, after digging through some doc I found something that mentioned that setting showTime to an object will be passed to the TimePicker, so you can make it work like this:

<DatePicker  
   showTime = {{ user12hours: true }} 
   allowClear={false}  
   format="YYYY-MM-DD HH:mm"  
   defaultValue={ moment(value) }   
   onChange={handleChange}/>

[developdeez]

I was able to get the 12 hour working using this but I can't get rid of the seconds...

 <DatePicker
                  showTime={{ use12Hours: true }}
                  format="YYYY-MM-DD HH:mm a"
                />

Anyone have a solution?

[flaviotsf]

@developdeez - this worked to format the time without seconds. Basically pass the format option to showTime as well:

  <DatePicker
              onChange={this.handleTimeChange}
              showTime={{ use12Hours: true, format: "HH:mm a" }}
              format="YYYY-MM-DD HH:mm a"
              value={this.props.socialEvent.eventDate}
            />

[chefThomas]

An alternative is to interface directly with moment object spit out by datepicker. Use the format method.
Docs here.

moment.format('HH:mm a') for 12 hour format

[sahilpaudel]

 <DatePicker
            className={styles.edit_start_time}
            format="DD-MM-YYYY HH:mm A"
            showTime={{ use12Hours: true, format: "HH:mm A" }}
            onChange={onChange} onOk={onOk} />

This one works but if I select time for PM it goes beyond 12h as 20-03-2021 15:58 PM but I want it to be 20-03-2021 03:58 PM

[shubhankar30]

 <DatePicker
            className={styles.edit_start_time}
            format="DD-MM-YYYY HH:mm A"
            showTime={{ use12Hours: true, format: "HH:mm A" }}
            onChange={onChange} onOk={onOk} />

This one works but if I select time for PM it goes beyond 12h as 20-03-2021 15:58 PM but I want it to be 20-03-2021 03:58 PM

Use hh instead of HH

[abdukadirov]

Doesn't appear to be working for me.

<DatePicker  
   showTime  
   use12Hours = {true} 
   allowClear={false}  
   format="YYYY-MM-DD HH:mm"  
   defaultValue={ moment(value) }   
   onChange={handleChange}/>

Still showing 24 hour time

Hi, my friend, you don't need to use use12Hours in order to get 12 hours, you should just change the format format="YYYY-MM-DD HH:mm" to format="YYYY-MM-DD hh:mm" , HH gives 24hours hh provides 12hours, I hope, I'm able to give you a solution