javascript - jquery datetimepicker 插件 - 如何使用字段中的日期/时间初始化日历/时间选择？

Question

我正在使用这个 jquery 的 datetimepicker 插件:https://github.com/xdan/datetimepicker

一切正常，除了我想将日期格式从“YYYY/MM/DD”更改为“DD/MM/YYYY”。我已经通过这样做了

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

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

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

当页面加载并且字段中已设置日期/时间时会出现问题:其格式与上面相同，例如 2020/05/21 17:00 -插件写入字段的格式相同。

当我单击该字段并出现日历/时间选择时，它被设置为现在，而不是字段中的内容。就像现在我更改了格式一样，它无法正确读取字段中的日期/时间，因此无法正确初始化自身。当我坚持使用默认格式('Y/m/d H:mm')时，这一切都工作正常

文档位于:https://xdsoft.net/jqplugins/datetimepicker/

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

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

编辑2 - 尝试@Kalimah的方法，如下，它有点有效，但有点损坏 - 日期选择器(在第二个输入上)看起来已经在正确的年份和月份初始化，但日历上没有突出显示这一天，并且分钟全部表示为“i”:请参阅按“运行代码片段”按钮后在此页面上拍摄的屏幕截图。

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