它可以正常工作，直到触发任何控件回发，但是当控件触发任何回发事件时，如果我们将“起始日期”更改为“截止日期”日期时间选择器，则它仅显示日期而不是日期和时间。当我更改“截止日期”与“起始日期”datetimepicker 中的相同时，它只显示日期而不是日期和时间。看起来它重置了 datetimepicker onClose(); 我还尝试设置 minDateTime 和 maxDateTime 属性，但问题仍然没有解决。我正在使用 jqueryUI datetimepicker
问题_起始日期
Issue_ToDate
代码:
<html>
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<script>
var server_date_time;
function validation() {
var maxDate = $(".todate-with-time").val();
var maxTime = maxDate.substr(maxDate.indexOf(" ") + 1, maxDate.length)
if (maxDate == null || maxDate == undefined || maxDate == "") {
maxDate = server_date_time;
maxTime = moment(server_date_time).format("HH:mm:ss A");
}
var minDate = $(".frmdate-with-time").val();
var minTime = minDate.substr(minDate.indexOf(" ") + 1, minDate.length)
if (minDate == null || minDate == undefined || minDate == "") {
minDate = server_date_time;;
minTime = moment(server_date_time).format("HH:mm:ss A");
}
$(".frmdate-with-time").datetimepicker({
changeMonth: true,
changeYear: true,
currentText: 'Today',
showButtonPanel: true,
timeFormat: 'hh:mm:ss TT',
maxDate: maxDate,
maxTime: maxTime,
controlType: 'select',
//onSelect: function (selectedDateTime) {
// this.fireEvent && this.fireEvent('onchange') || $(this).change();
// $('.todate-with-time').datetimepicker('option', 'minDate', selectedDateTime);
// //$('.todate-with-time').datetimepicker('option', 'minDate', $('.frmdate-with-time').datetimepicker('getDate'));
// //$(".todate-with-time").datetimepicker("option", "minTime", selected.substr(selected.indexOf(" ") + 1, selected.length));
//}
});
$(".todate-with-time").datetimepicker({
changeMonth: true,
changeYear: true,
currentText: 'Today',
showButtonPanel: true,
timeFormat: 'hh:mm:ss TT',
minDate: minDate,
minTime: minTime,
controlType: 'select',
//onSelect: function (selectedDateTime) {
// this.fireEvent && this.fireEvent('onchange') || $(this).change();
// //$(".frmdate-with-time").datetimepicker("option", "maxDateTime", selected);
// $('.frmdate-with-time').datetimepicker('option', 'maxDate', selectedDateTime);
//}
});
}
$(function () {
server_date_time = new Date();
validation();
$(".frmdate-with-time").datepicker("setDate", server_date_time);
$(".todate-with-time").datepicker("setDate", server_date_time);
<!-- $(".frmdate-with-time").on("dp.change", function (e) { -->
<!-- $('.todate-with-time').data("DateTimePicker").minDate(e.date); -->
<!-- }); -->
<!-- $(".todate-with-time").on("dp.change", function (e) { -->
<!-- $('.frmdate-with-time').data("DateTimePicker").maxDate(e.date); -->
<!-- }); -->
});
</script>
</head>
<body>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<span id="Label2" class="innerlabels col-sm-4">From</span>
<div class="col-sm-8">
<div class="input-group input-group-sm">
<input name="txt_FDate" type="text" id="txt_FDate" class="frmdate-with-time hasDatepicker" placeholder="dd/mm/yyyy hh:mm:ss" readonly="readonly">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<span id="Label6" class="innerlabels col-sm-4">To</span>
<div class="col-sm-8">
<div class="input-group input-group-sm">
<input name="txt_TDate" type="text" id="txt_TDate" class="todate-with-time hasDatepicker" placeholder="dd/mm/yyyy hh:mm:ss" readonly="readonly">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
您可以使用以下设置来做到这一点。使用dp.change方法
$(function() {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker({
useCurrent: false
});
$("#datetimepicker1").on("dp.change", function(e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function(e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
查看工作 example
关于c# - 基于另一个 datetimepicker 在 jquery datetimepicker 中设置日期和时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60716841/