CODEWITHSUNDEEP
javascriptjquery
shibbir ahmed
shibbir ahmed

Reputation: 1024

How can I add 12 hour format in jQuery datetimepicker?

I am using following source to add date and time calendar in my website : http://xdsoft.net/jqplugins/datetimepicker/. In there example they didn't provide the 12 hour format. Like : 1:00 Am, 2:00 Am 11:00 Am, 2:00 PM, 3:00 PM etc.

So that I using following code to show the 12 hour format but when I add the time it's showing me less 1 hour from my selected time. For Example : If I select 6:00 PM it's showing me 5:00 PM. How can I solved this issue ?

My js code : 

$('#add_date').datetimepicker({     
    timepicker:false,
    format:'d/m/Y',
    formatDate:'Y/m/d',
    minDate:'-1970/01/02', // yesterday is minimum date
    maxDate:'+2017/12/01' // and tommorow is maximum date calendar
    });

$('#add_time').datetimepicker({
    datepicker:false,
    format:'g:i A', // edited by me
    step:60
});

I changed the original js file (jquery.datetimepicker.full.js) to bellow (line no 1108) :

// edited by me
formatTime: 'g:i A',
// original code
formatTime: 'H:i',

Update :

What I am using now :

$('#add_time').datetimepicker({
    datepicker:false,
    format:'H:i A',
    step:60
});

Upvotes: 4

Views: 13554

Answers (5)

Arpit jain
Arpit jain

Reputation: 9

We have to modify only ampm attribute

$("#dts_from_time").timepicker({
  timeText: 'Time',
  hourText: 'hour',
  minuteText: 'min',
  currentText: 'now',
  closeText: 'Done',
  timeOnlyTitle: 'Time slot',
  hour: true,
  ampm: true, // on true condition 12hr clock
});

Upvotes: 0

Darshan Jain
Darshan Jain

Reputation: 838

This worked for me.

$('#lectureEndTime').datetimepicker({
      format: 'H:m a',
      datepicker: false,
 });

I am able to see 12 hours selection option while selecting the hours and minutes.

Upvotes: 0

Sprograms
Sprograms

Reputation: 95

Here is the fix. The Class which draws is xdsoft_current.

Old Buggy Code: Line 1891

if ((options.initTime || options.defaultSelect || datetimepicker.data('changed'))
   && current_time.getHours() === parseInt(h, 10)
   && ((!isALlowTimesInit && options.step > 59) || current_time.getMinutes() === parseInt(m, 10))) {

Fixed by Adding +1 after current_time.getHours() 

if ((options.initTime || options.defaultSelect || datetimepicker.data('changed'))
   && current_time.getHours() +1 === parseInt(h, 10)
   && ((!isALlowTimesInit && options.step > 59) || current_time.getMinutes() === parseInt(m, 10))) {

Upvotes: 0

demartis
demartis

Reputation: 319

Try this code (updated):

$('#add_time').datetimepicker({
    datepicker:false,
    formatTime:"h:i a",
    step:60
});

Complete example here: https://jsfiddle.net/rdemartis/p9ezwn0n/5/

Update: Or this, if you desire the same format for output:

$('#add_time').datetimepicker({
    datepicker:false,
    formatTime:"h:i a",
    step:60,
    format:"h:i a"
});

Complete example here: https://jsfiddle.net/rdemartis/p9ezwn0n/8/

Upvotes: 5

Sagar R
Sagar R

Reputation: 613

There is property called 

"hours12"

make it true

Upvotes: 1

Related Questions