9阅网

您现在的位置是:首页 > 知识 > 正文

知识

javascript - jquery datetimepicker插件 - 如何用字段中的日期时间初始化calendartime选择?

admin2022-11-07知识22

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

除了我想把日期格式从 "YYYYMMDD "改为 "DDMMYYYY "之外,一切都很好。 我通过传递

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

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

这样就可以了,当我选择日期和时间时,它就会以这种格式写入文本字段,例如 2020/05/21 17:00.

当页面加载时,问题就会发生,而且在字段中已经设置了日期时间:这与上面的格式相同,例如 2020/05/21 17:00 - 与插件写入字段的格式相同。

当我点击该字段并出现calendartimeselect时,它被设置为 现在 而不是字段中的内容。 就像现在我改变了格式,它不能正确地从字段中读取日期时间,所以不能正确地初始化自己。 当我坚持使用默认格式('Ymd H:mm')时,这一切都能正常工作。

文档在这里。 https:/xdsoft.netjqpluginsdatetimepicker。

有人知道如何解决这个问题吗?

编辑 - 这里有一个jsfiddle演示了这个问题。https:/jsfiddle.netLphdnt20。

编辑2 - 尝试了@Kalimah的方法,如下,它有点工作,但它有点坏--日期选择器(在第二个输入上)看起来像它已经初始化在正确的年份和月份,但日期没有在日历上突出显示,而且分钟都表示为 "i":请看截图,这是在这个页面上拍摄的,在按下 "运行代码片段 "按钮后。enter image description here



【回答】:

显然这是一个错误 (见此).

你有两个方法来解决这个问题。首先,通过在模糊事件中添加 validateOnBlur: false 到你的选项。

或者,你可以使用一个外部库,比如 moment.js 来验证。这种方法的缺点是,它适用于全局的所有日期选择器。我无法找到一种方法来使其特定于单个拾取器。

查看更多 此处 关于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">