[英]Set the min date and max date of 2 datepickers based on dropdown value
我有2個日期選擇器和一個下拉菜單,我想根據下拉選擇設置第二個日期選擇器的最小和最大日期,如下所示。
<asp:DropDownList ID="ddlleavetype" class="textbox" onchange="ShowHideDiv()" runat="server">
<asp:ListItem Value="">--Select--</asp:ListItem>
<asp:ListItem Value="Casual leave">Casual leave</asp:ListItem>
<asp:ListItem Value="Sick leave">Sick leave</asp:ListItem>
<asp:ListItem Value="Annual leave">Annual leave</asp:ListItem>
<asp:ListItem Value="Paternity leave">Paternity leave</asp:ListItem>
<asp:ListItem Value="Maternity leave">Maternity leave</asp:ListItem>
<asp:ListItem Value="Bereavement leave">Bereavement leave</asp:ListItem>
</asp:DropDownList>
因此,如果我從上面的下拉列表中選擇臨時休假,則datepicker2的最大日期應為datepicker1的第二天,如果與下拉列表不同,則datepicker2的最大日期可以為n天。 下面是日期選擇器的代碼。
$('.datepicker1').datepicker({
beforeShowDay: highlightDays,
minDate: 1,
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
maxDate: 2020,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate') || new Date();
var max = $(this).datepicker('getDate') || new Date();
max.setDate(max.getDate() + 1);
min.setDate(min.getDate() + 1);
$('.datepicker4').datepicker('option', { minDate: min, maxDate: max });
}
});
$('.datepicker2').datepicker({
beforeShowDay: highlightDays,
//minDate: 2,
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
onSelect: function (dateStr) {
var max = $(this).datepicker('getDate');
$('.datepicker1').datepicker('option', { maxDate: max });
}
Date().getFullYear().toString()
});
您必須通過jquery在下拉選項中獲取價值。
<script type="text/javascript">
$(function () {
$(".datepicker1").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
//your options here
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate') || new Date();
var max = $(this).datepicker('getDate') || new Date();
max.setDate(max.getDate() + 1);
min.setDate(min.getDate() + 1);
var selectedValue = $('#<%=ddlleavetype.ClientID%>').val();
if (selectedValue == 'Casual leave') {
$(".datepicker2").datepicker('option', { minDate: min, maxDate: max });
}
else {
$(".datepicker2").datepicker('option', { minDate: null, maxDate: null });
}
}
});
$(".datepicker2").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
//your options here
});
$('#<%=ddlleavetype.ClientID%>').change(function () {
if (this.value) {
var min = $(".datepicker1").datepicker('getDate') || new Date();
var max = $(".datepicker1").datepicker('getDate') || new Date();
max.setDate(max.getDate() + 1);
min.setDate(min.getDate() + 1);
var selectedValue = this.value;
if (selectedValue == 'Casual leave') {
$(".datepicker2").datepicker('option', { minDate: min, maxDate: max });
}
else {
$(".datepicker2").datepicker('option', { minDate: null, maxDate: null });
}
}
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.