[英]Set the min date and max date of 2 datepickers based on dropdown value
I have 2 datepickers and a dropdown and I want to set the min and max dates of the second datepicker based on the dropdown selection as shown below. 我有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>
So If I select Casual leave from the above dropdown the max date of datepicker2 should be the next day of datepicker1 and if it is a different selection from dropdown then the max date of datepicker2 can be n number of days. 因此,如果我从上面的下拉列表中选择临时休假,则datepicker2的最大日期应为datepicker1的第二天,如果与下拉列表不同,则datepicker2的最大日期可以为n天。 Below would be the code for the datepickers.
下面是日期选择器的代码。
$('.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()
});
You have to get value in your drop down option via jquery. 您必须通过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.