如何在jQuery日期时间选择器中添加12小时格式

How can I add 12 hour format in jQuery datetimepicker?

本文关键字:添加 12小时 格式 选择器 时间 jQuery 日期      更新时间:2023-09-26

我使用以下来源在我的网站中添加日期和时间日历:http://xdsoft.net/jqplugins/datetimepicker/.在这个例子中,他们没有提供12小时的格式。比如:凌晨1:00、凌晨2:00、上午11:00、下午2:00、下午3:00等

因此,我使用以下代码来显示12小时的格式,但当我添加时间时,它显示的距离我选择的时间不到1小时。例如:如果我选择下午6点,它显示的是下午5点。我如何解决这个问题?

我的js代码:

$('#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
});

我把原来的js文件(jquery.datetimepicker.full.js)改为如下(第1108行):

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

更新:

我现在使用的:

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

尝试此代码(已更新):

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

完整示例如下:https://jsfiddle.net/rdemartis/p9ezwn0n/5/

更新:或者,如果您希望输出相同的格式:

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

完整示例如下:https://jsfiddle.net/rdemartis/p9ezwn0n/8/

有一个称为的属性

"hours12"

实现

以下是修复方法。绘制的类是xdsoft_current。

旧Buggy代码:线路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))) {

通过在current_time.getHours()后添加+1修复

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))) {

这对我有效。

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

在选择小时和分钟时,我可以看到12小时选择选项。

我们只能修改ampm属性

$("#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
});