jquery datetimepicker 插件 - 如何使用字段中的 date/time 初始化 calendar/time select？

Question

我正在为 jquery 使用这个日期时间选择器插件：https://github.com/xdan/datetimepicker

一切正常，只是我想将日期格式从 "YYYY/MM/DD" 更改为 "DD/MM/YYYY"。我通过

format:'d/m/Y H:mm',

在初始化字段的日期时间选择器的选项中。

这很有效，因为当我选择日期和时间时，它会以该格式写入文本字段，例如 2020/05/21 17:00。

当页面加载并且字段中已经设置了 date/time 时出现问题：这与上面的格式相同，例如 2020/05/21 17:00 - 与插件写入的格式相同领域。

当我单击该字段并出现 calendar/timeselect 时，它被设置为 NOW 而不是该字段中的内容。就像现在我更改了格式，它无法正确读取字段外的 date/time，因此无法正确初始化自身。当我坚持使用默认格式 ('Y/m/d H:mm')

时，一切正常

文档在这里：https://xdsoft.net/jqplugins/datetimepicker/

有谁知道如何解决这个问题？

编辑 - 这是一个演示问题的jsfiddle：
https://jsfiddle.net/Lphdnt20/

编辑 2 - 尝试 @Kalimah 的方法，如下所示，它有点工作但有点坏 - 日期选择器（在第二个输入上）看起来已经初始化了正确的年份和月份，但日期未在日历上突出显示，分钟均表示为 "i"：请参阅按 "Run code snippet" 按钮后在此页面上截取的屏幕截图。

Answer 1

显然这是一个错误 (see here)。

您有两种解决方法。第一个通过在您的选项中添加 validateOnBlur: false 来禁用模糊事件验证。

或者，您可以使用 moment.js 等外部库进行验证。这种方法的缺点是它全局适用于所有日期选择器。我找不到使它特定于单个选择器的方法。

查看更多here moment.js 格式化选项。

这是一个演示：

/* Add this to enable moment.js formatting (or add your own formatter)*/
jQuery.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);
  }
});

$("#picker2").datetimepicker({
  step: 30,
  format: 'DD/MM/YYYY' // Change to moment.js formatting options
});

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

<input id="picker2" name="bar" size="30" style="width: 150px" type="text" value="25/02/2016 18:30">

如果您决定使用第二个选项，则需要在每次初始化日期选择器时应用格式。看这个例子：

jQuery.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);
  }
});

$("#picker1").datetimepicker({
  step: 30,
  format: 'YYYY/MM/DD H:mm',
  formatTime:'H:mm',
  formatDate:'YYYY/MM/DD'
});
//try to use different date format
$("#picker2").datetimepicker({
  step: 30,
  format: 'DD/MM/YYYY H:mm',
  formatTime: "H:mm",
  formatDate: "DD/MM/YYYY"
});

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}

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

<p>
  A text field with a date in datetimepicker's default format of "yyyy/mm/dd hh:mm". Initialises correctly with the date/time from the input.
</p>
<input id="picker1" name="foo" size="30" style="width: 150px" type="text" value="2016/02/25 18:30">

<p>
  A text field with a date in "dd/mm/yyyy hh:mm" format (called 'd/m/Y H:m' in the datetimepicker options). The plugin will *write* the selected date and time into the field correctly, but it doesn't initialise itself properly from the time in the field:
  when it appears, the date and time picker are set to the **current** date/time, not the date/time from the input. Note that if you choose a time/date, it will write it into the input with the desired format, which suggests that the problem is not the
  'format' option itself.
</p>
<input id="picker2" name="bar" size="30" style="width: 150px" type="text" value="25/02/2016 18:30">

jquery datetimepicker 插件 - 如何使用字段中的 date/time 初始化 calendar/time select？

jquery datetimepicker plugin - how to initialise calendar/time select with the date/time from the field?

javascript

jquery

datetimepicker