gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 08:29:39 27 4
gpt4 key购买 nike

我正在使用这个 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”:请参阅按“运行代码片段”按钮后在此页面上拍摄的屏幕截图。 enter image description here

最佳答案

显然这是一个错误 ( 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">

关于javascript - jquery datetimepicker 插件 - 如何使用字段中的日期/时间初始化日历/时间选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61889018/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com