【发布时间】：2015-10-29 10:02:47
【问题描述】：
我按照这篇文章中的示例进行操作：jquery datetime picker set minDate dynamic。
我尝试了两种方法：
第一种方法
此方法仅适用于第一次选择“到”日期。也就是说，在选择了一次“from”和“to”日期后，我回来重新选择“from”日期，然后“to”日期下拉列表没有相应改变，它仍然是我第一次选择：
$('.to').datepicker({
beforeShow: function(input, inst) {
var mindate = $('.from').datepicker('getDate');
$(this).datepicker('option', 'minDate', mindate);
}
});
html：从“从”日期日历中选择
<script type="text/javascript">
$(function() {
$('.from').datepicker(
{
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.date-picker').focusout()//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$(".ui-datepicker-calendar").hide();
}
}
})
});
</script>
我输入了 https://jsfiddle.net/3w3h097c/ 。在小提琴中，下拉日历没有出现我不知道为什么，但它确实出现在我的浏览器中。
从“到”日期日历中选择
与从“从”日期日历中选择的唯一不同之处是添加以下两句话：
beforeShow : function(input, inst) {
var mindate = $('.from').datepicker('getDate'); // Added sentence, the rest same
$(this).datepicker('option', 'minDate', mindate); //>Added sentence,the rest same
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
......
第二种方法——根本不起作用
为“from”和“to”添加一个“onSelect: function(selected)”。
<---from--->
$(function() {
$('.from').datepicker(
{
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
<!--add onSelect here---->
onSelect: function(selected) {
$(".to").datepicker("option","minDate", selected)
},
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.from').focusout()//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$(".ui-datepicker-calendar").hide();
}
}
})
});
<!--to:-->
$(function() {
$('.to').datepicker(
........
onSelect: function(selected) {
$('.from').datepicker("option","maxDate", selected)
},
.......
【问题讨论】：
-
@Arun P Johny，非常感谢，但这个演示也有同样的问题。如果您想重新选择起始日期，“到”日期下拉菜单不会更新。
-
你能重复一下这个要求吗......确实希望通过更改日期选择器弹出窗口中的下拉菜单来选择月份吗？
-
再一次，你想从日期选择器中得到什么值......它只是 mm/yy 值
-
@Arun P Johny，是的，我只想知道年份和月份。我找到了一个像下面这样的好：jsfiddle.net/tF5MH/9，它可以设置从小于到日期，也可以清除日期。唯一的问题是这是日期选择器。但我只想要年和月。
标签： jquery datetimepicker