django jquery月份选择器-“到"日期并非总是迟于“起始"日期进行更新 [英] django jquery month picker- the "to" date not always updated as later than ”from“ date
问题描述
我遵循了本文中的示例: jquery日期时间选择器集minDate动态.
I followed the example in this post:jquery datetime picker set minDate dynamic.
我尝试了两种方法:
第一种方法
此方法仅适用于第一次选择到"日期的时间.也就是说，在选择一次开始日期"和结束日期"之后，我返回以重新选择开始日期"，然后结束日期"下拉列表没有发生相应变化，这是我第一次选择了:
this method only works for FIRST TIME selecting "to" date. That's to say, after selecting once "from" and "to" date, I come back to re-select the "from" date, then "to" date drop down list doesn't change accordingly, it remains as the 1st time I chose:
$('.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/.在小提琴中，下拉日历没有出现，我不知道为什么，但是确实出现在了我的浏览器中.
I put in the https://jsfiddle.net/3w3h097c/ . In the fiddle, the drop down calendar doesn't appear I don't know why, but it indeed appears in my browser.
从至"日期日历中选择
与从从"日期日历中选择的唯一不同的是添加以下两个句子:
The only different compared to select from "from" date calendar is to add the following 2 sentences:
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)".
Add a "onSelect: function(selected)" for both "from " and "to".
<---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)
},
.......
推荐答案
经过2天的搜索，终于找到了一个解决问题的好方法.
After searching 2 days, finally found a good one solving the problem.
http://techbrij.com/month-range-picker-jquery- ui-datepicker
$( "#from, #to" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
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));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
}
else{
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
})
这篇关于django jquery月份选择器-“到"日期并非总是迟于“起始"日期进行更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
