Javascript 如何阻止用户选择早于开始时间的结束时间
我使用datetimepicker在表单中设置值。我一直试图限制用户在开始时间之前选择结束时间。我试着设置mindate,hourmin,一个新的日期,等于开始日期,但没有成功。根据我所相信的,下面的代码应该可以工作,但它不能Javascript 如何阻止用户选择早于开始时间的结束时间,javascript,jquery,jquery-ui,jquery-ui-timepicker,Javascript,Jquery,Jquery Ui,Jquery Ui Timepicker,我使用datetimepicker在表单中设置值。我一直试图限制用户在开始时间之前选择结束时间。我试着设置mindate,hourmin,一个新的日期,等于开始日期,但没有成功。根据我所相信的,下面的代码应该可以工作,但它不能 <script src="../js/jquery-1.9.1.js"></script> <script src="../js/jquery-ui-1.10.3.custom.js"></script&g
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui-1.10.3.custom.js"></script>
<script src="../js/jquery-ui-timepicker-addon.js"></script>
<script src="../js/jquery-ui-sliderAccess.js"></script>
<script>
$(function()
{
var startDateTextBox = $('#startDate');
var endDateTextBox = $('#endDate');
var startTimeTextBox = $('#startTime');
var endTimeTextBox = $('#endTime');
startDateTextBox.datepicker(
{
minDate: ("setDate", '',new Date()),
hourGrid: 12,
minuteGrid: 15,
stepMinute: 15,
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '')
{
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else
{
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
}
}
);
startTimeTextBox.datetimepicker(
{
timeOnly:true,
minuteGrid: 15,
stepMinute: 15,
minDate: ("setTime", '',new Date()),
timeFormat: 'hh:mm tt',
onClose: function(dateText, inst)
{
if (endTimeTextBox.val() != '')
{
var testStartTime = startTimeTextBox.datetimepicker('getDate');
var testEndTime = endTimeTextBox.datetimepicker('getDate');
if(testStartTime > testEndTime)
endTimeTextBox.timepicker('setTime', testStartTime);
}
else
{
endTimeTextBox.val(dateText)
}
},
onSelect: function (selectedDateTime){
endTimeTextBox.datetimepicker('setDate', startTimeTextBox.datetimepicker('getDate') );
}
}
);
endDateTextBox.datepicker(
{
hourGrid: 12,
minuteGrid: 15,
stepMinute: 15,
onClose: function(dateText, inst)
{
if (startDateTextBox.val() != '')
{
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else
{
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
}
}
);
endTimeTextBox.datetimepicker(
{
timeOnly:true,
minuteGrid: 15,
stepMinute: 15,
timeFormat: 'hh:mm tt',
onClose: function(dateText, inst)
{
if (startTimeTextBox.val() != '')
{
var testStartTime = startTimeTextBox.datetimepicker('getDate');
var testEndTime = endTimeTextBox.datetimepicker('getDate');
if (testStartTime > testEndTime)
endTimeTextBox.datetimepicker('setDate', testStartTime);
}
else
{
startTimeTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startTimeTextBox.datetimepicker('option', 'maxDate', endTimeTextBox.datetimepicker('getDate') );
}
}
);
}
);
</script>
在上面的代码中,我使用datetimepicker jquery插件分离了日期和时间字段。我这样做是为了更好地控制输入以及它在数据库中的存储方式。我希望这将有助于我的查询,并允许更容易的搜索和更新功能。这是用php编写的调度项目的一部分,该项目支持jquery进行用户交互。在此过程中的任何帮助和建议都将不胜感激 这个想法是对的,问题是你如何比较你的约会。我试过调用
datepicker(“getDate”)
,它会返回一个字符串,我假设在您的datetimepicker插件上也是这样
您正在比较的字符串类似于2013年6月12日星期三00:00:00 GMT+0200(CEST),这里的相等性仅基于工作日的词典顺序
但是,如果使用JavaScript方法Date.parse(),则可以轻松比较:
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (Date.parse(testStartDate) > Date.parse(testEndDate))
endDateTextBox.datetimepicker('setDate', testStartDate);
有了这个要点,我有了一个玩具网站,你可以在那里尝试验证,第一次约会已经成功了:谢谢。我早上第一件事就是试试看。我会让你知道事情的进展,我会看看这个网站。再次感谢你,但这个解决方案有点偏离了我想要做的。在你的帮助下,我找到了一个更有效的解决方案。我将发布到目前为止我得出的答案。
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (Date.parse(testStartDate) > Date.parse(testEndDate))
endDateTextBox.datetimepicker('setDate', testStartDate);