Question

我有一个奇怪的恼人问题。

此jQuery DateTimePicker在输入blur上减少了1小时。

密切关注...... 选择日期，然后选择时间。在您聚焦输入字段之前，它会正常运行。

我无法弄清楚......

这是一个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

这是项目GitHub存储库的一个未解决的问题：格式“m / d / Y h：我是”更改小时onBlur＃596 https://github.com/xdan/datetimepicker/issues/596

不过，有一个解决方法

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

Answer 2

所以这对我有用：

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

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

此处的工作代码段：

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 3

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

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

当我设置：

validateOnBlur：假

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 4

这是解决方法。
绘制的类为xdsoft_current。

旧儿童车代码-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之间的空格。因此，该格式比选择的时间少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在输入模糊

6 个答案: