In My date picker I have certain constraints
在我的日期选择器中,我有一些限制
- End date should not be earlier than Start date -Done
- 结束日期不应早于开始日期-Done
- Now my problem is User should not able to select End date without selecting the Start date
- 现在我的问题是用户不应该选择结束日期而不选择开始日期
My Jquery for datepicker:
我的Jquery为datepicker:
var dateToday = new Date();
$( function() {
$( "#datepicker1" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
// minDate: dateToday,
onClose: function (selected) {
$("#end").datepicker("option", "minDate", selected);
}
});
$( "#end" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
// minDate: dateToday,
onClose: function (selected) {
$("#datepicker1").datepicker("option", "maxDate", selected);
}
});
});
2 个解决方案
#1
3
See the changes in:
查看以下更改:
onClose: function (selected) {
if(selected.length <= 0) {
// selected is empty
$("#end").datepicker('disable')
} else {
$("#end").datepicker('enable');
}
$("#end").datepicker("option", "minDate", selected);
}
Demo here to give you an idea. Adopt to your needs.
在这里演示给你一个想法。采纳您的需求。
var dateToday = new Date();
$( function() {
$( "#datepicker1" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
// minDate: dateToday,
onClose: function (selected) {
if(selected.length <= 0) {
// selected is empty
$("#end").datepicker('disable');
} else {
$("#end").datepicker('enable');
}
$("#end").datepicker("option", "minDate", selected);
}
});
$( "#end" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
// minDate: dateToday,
onClose: function (selected) {
if(selected.length <= 0) {
// selected is empty
$("#datepicker1").datepicker('disable');
} else {
$("#datepicker1").datepicker('enable');
}
$("#datepicker1").datepicker("option", "maxDate", selected);
}
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker1" type="text">
<input id="end" type="text">
#2
1
In first you should disable the #end
datepicker by default. Then modify the onClick
handler of the #datepicker1
as following:
首先,您应该默认禁用#end datepicker。然后修改#datepicker1的onClick处理程序,如下所示:
onClose: function (selected) {
$("#end")
.datepicker("option", "minDate", selected)
.datepicker("option", "disabled", !selected);
}
#1
3
See the changes in:
查看以下更改:
onClose: function (selected) {
if(selected.length <= 0) {
// selected is empty
$("#end").datepicker('disable')
} else {
$("#end").datepicker('enable');
}
$("#end").datepicker("option", "minDate", selected);
}
Demo here to give you an idea. Adopt to your needs.
在这里演示给你一个想法。采纳您的需求。
var dateToday = new Date();
$( function() {
$( "#datepicker1" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
// minDate: dateToday,
onClose: function (selected) {
if(selected.length <= 0) {
// selected is empty
$("#end").datepicker('disable');
} else {
$("#end").datepicker('enable');
}
$("#end").datepicker("option", "minDate", selected);
}
});
$( "#end" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
// minDate: dateToday,
onClose: function (selected) {
if(selected.length <= 0) {
// selected is empty
$("#datepicker1").datepicker('disable');
} else {
$("#datepicker1").datepicker('enable');
}
$("#datepicker1").datepicker("option", "maxDate", selected);
}
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker1" type="text">
<input id="end" type="text">
#2
1
In first you should disable the #end
datepicker by default. Then modify the onClick
handler of the #datepicker1
as following:
首先,您应该默认禁用#end datepicker。然后修改#datepicker1的onClick处理程序,如下所示:
onClose: function (selected) {
$("#end")
.datepicker("option", "minDate", selected)
.datepicker("option", "disabled", !selected);
}