jQuery 日期时间选择器验证开始日期应小于结束日期不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30589514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 16:42:25 来源:igfitidea点击:
Datetime picker validation start date should be less than end date not working
提问by 0015
Jquery Date time pickervalidationstart date should be less than end date, and my current code is not working
Jquery 日期时间选择器验证开始日期应小于结束日期，并且我当前的代码不起作用
$(document).ready(function(){
$("#startdate").datetimepicker({
format:'Y-m-d H:i:s',
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#enddate").datetimepicker("option", "minDate", dt);
}
});
$("#enddate").datetimepicker({
format:'Y-m-d H:i:s',
onSelect: function (selected) {
var dt1 = new Date(selected);
dt1.setDate(dt1.getDate() - 1);
$("#startdate").datetimepicker("option", "maxDate", dt1);
}
});
});<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label >Starts ON</label>
<input id="startdate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>
<label>Ends ON</label>
<input id="enddate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>I am not able to validate onselect function is not getting triggered
我无法验证 onselect 功能没有被触发
回答by Navneeth
Try this. Its working for me.
尝试这个。它为我工作。
var startDate;
$("#startdate").datetimepicker({
timepicker:true,
closeOnDateSelect:false,
closeOnTimeSelect: true,
initTime: true,
format: 'd-m-Y H:m',
minDate: 0,
roundTime: 'ceil',
onChangeDateTime: function(dp,$input){
startDate = $("#startdate").val();
}
});
$("#enddate").datetimepicker({
timepicker:true,
closeOnDateSelect:false,
closeOnTimeSelect: true,
initTime: true,
format: 'd-m-Y H:m',
onClose: function(current_time, $input){
var endDate = $("#enddate").val();
if(startDate>endDate){
alert('Please select correct date');
}
}
});
回答by Hardik Panseriya
function datetimepicker()
{
var startdate = $('#startdate').val();
var enddate = $('#enddate').val();
$("#startdate").datetimepicker('setEndDate', enddate);
$("#enddate").datetimepicker('setStartDate', startdate);
}
$(document).ready(function(){
datetimepicker();
});
回答by Naveed Ul Islam
$(document).ready(function(){
$("#startdate").datetimepicker({
format:'Y-m-d H:i:s',
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#enddate").datetimepicker("option", "minDate", dt);
}
});
$("#enddate").datetimepicker({
format:'Y-m-d H:i:s',
onSelect: function (selected) {
var dt1 = new Date(selected);
dt1.setDate(dt1.getDate() - 1);
$("#startdate").datetimepicker("option", "maxDate", dt1);
}
});
});<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label >Starts ON</label>
<input id="startdate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>
<label>Ends ON</label>
<input id="enddate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>回答by NoBullMan
$(document).ready(function () {
bindCalendars();
....
});
function bindCalendars() {
$('#startdate').unbind();
$('#enddate').unbind();
$('#startdate').datetimepicker({
format: 'Y-m-d H:i:s'
});
$('#enddate').datetimepicker({
format: 'Y-m-d H:i:s',
useCurrent: false
});
$("#startdate").on("change.datetimepicker", function (e) {
$('#enddate').datetimepicker('minDate', e.date);
});
$("#enddate").on("change.datetimepicker", function (e) {
$('#startdate').datetimepicker('maxDate', e.date);
});
