django jquery month picker- the "to" date not always updated as later than ”from“ date

Question

I followed the example in this post:jquery datetime picker set minDate dynamic.

I tried 2 ways:

First method

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: to select from "from" date calendar

     <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>

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.

to select from "to" date calendar

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));
        ......

Second method--doesn't work at all

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)
                        },

.......

@Arun P Johny, thank you a lot, but this demo also has the same issue. If you want to reselect the from date, the "to" date drop down doesn't get updated. — Héléna, Oct 30 '15 at 06:02
can you repeat the requirement.... do want the months to be selected by just changing the dropdown in the datepicker popup? — Arun P Johny, Oct 30 '15 at 06:03
again what is the value you want from the datepicker... is it just the mm/yy value — Arun P Johny, Oct 30 '15 at 06:04
@Arun P Johny, yes, I only want to have the year and month. I found a good one like below:http://jsfiddle.net/tF5MH/9/, it can set from less than to date, and can also clear the date. The only thing is that this is date picker. But I only want year and month. — Héléna, Oct 30 '15 at 06:07
@Arun P Johny, I found a perfect one just. http://techbrij.com/month-range-picker-jquery-ui-datepicker. Thanks for your attention anyway. — Héléna, Oct 30 '15 at 06:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93761/discussion-between-elena-and-arun-p-johny). — Héléna, Oct 30 '15 at 06:21

score 1 · Answer 1 · answered Oct 30 '15 at 06:21

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 month picker- the "to" date not always updated as later than ”from“ date

1 Answers1

Linked