jQuery DateTimePicker 在输入模糊时减去一小时

Question

我遇到了一个奇怪的恼人问题。

此 jQuery DateTimePicker 在输入 blur 时减去 1 小时。

仔细看... Select 一个日期，然后一个时间。在您聚焦输入字段之前，它会正常运行。

我想不通...

这里有一个 CodePen 给你玩。使用的 CDN 来自 here.

$('#start').datetimepicker({
  format:"Y-m-d h:i a",
  step:15
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.min.css" rel="stylesheet"/>

<input type="text" id="start">

Answer 1

所以这对我有用：

$('#datetimepicker').datetimepicker({
  step: 15,
  format:"Y-m-d h:i a",
  validateOnBlur: false,
})

但是，这似乎仍然是一个需要解决的错误，但同时这可能对您有所帮助。如果用户在使用日期选择器和关注输入之间更改时间，这将允许无效时间。

这里的工作片段：

$('#start').datetimepicker({
  format:"Y-m-d h:i a",
  step:15,
  validateOnBlur: false,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.min.css" rel="stylesheet"/>

<input type="text" id="start">

Answer 2

这是项目 GitHub 存储库中的未决问题：格式 "m/d/Y h:i a" 更改时间 onBlur #596 https://github.com/xdan/datetimepicker/issues/596

顺便说一句，有一个解决方法

$('#start').datetimepicker({
  format:"Y-m-d H:i A",
  validateOnBlur: false,
  step:15
});

Answer 3

此行为的原因是 a 以这种格式显示 PM/AM：

"Y-m-d h:i:m a"

当我设置：

validateOnBlur:false

时间不再更改。或者您也可以从此格式定义中删除 a。

$('#start').datetimepicker({
  format:"Y-m-d h:i a",
  //format:"Y-m-d h:i", // or use it without a or A for PM/AM
  step:15,
  validateOnBlur:false
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.min.css" rel="stylesheet"/>

<input type="text" id="start">

Answer 4

这是解决方法。
绘制的class是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))) {

Answer 5

您应该使用 MomentJS 来解决此问题，而无需更改代码，如下所示：

将其放在页面加载的某处：

$.datetimepicker.setDateFormatter({
  parseDate: function (date, format) {
    var d = moment(date, format);
    return d.isValid() ? d.toDate() : false;
  },
  formatDate: function (date, format) {
    return moment(date).format(format);
  }
});

并在初始化 DateTimePicker 时传递这些选项，明确传递格式选项（如 MomentJS 文档 https://momentjs.com/docs/#/displaying/ 中所述）：

$(selector).datetimepicker({
    lazyInit: true,
    format:'DD/MM/YYYY hh:mm A',
    formatDate:'DD/MM/YYYY',
    formatTime:'hh:mm A'
});

Answer 6

$('#datepicker, #datepicker-2').datetimepicker({
   formatTime:'h:i A',
   format: 'M d, Y, h:i A', 
   validateOnBlur: false, /* use validateOnBlur as false */
   minDate: 0,
   step: 30,
  });

问题：jQuery DateTimePicker 在输入模糊时减去一小时。

分析：validateOnBlur此函数默认为true。当我们使用像 (format: 'M d, Y, h:i A') 这样的格式时，它会在 h:i 和 A 之间设置 space 的格式。根据此格式，我们会比所选时间少 1 小时。

解决方案:

      $('#datepicker, #datepicker-2').datetimepicker({
             formatTime:'h:i A',
             format: 'M d, Y, h:i A',
             validateOnBlur: false, //use validateOnBlur as false
             minDate: 0,
             step: 30,
       });

jQuery DateTimePicker 在输入模糊时减去一小时

jQuery DateTimePicker is subtracting one hour on input blur

javascript

jquery

datetimepicker