drupal 7 date_popup module (update minDate onSelect event)

Question

I'm using drupal 7 module date (date_popup). I have 2 datepickers. I need to update minDate on the second datepicker on "onSelect" event by click on the first one. It works but only for the second click. If I click on the first datepicker and select date nothing happens and minDate is not updated. When I select the second time it works well. Why doesn't it work from my first click?

Here is my datepicker init php code for my module.

    <?php
    $form['leave'] = array(
            '#type' => 'date_popup', // types 'date_popup', 'date_text' and 'date_timezone' are also supported. See .inc file.
            '#title' => t('Leave'),
            '#default_value' => date('Y-m-d'),
            '#date_format' => $format,
            '#required' => TRUE, // Added
            '#date_label_position' => 'within', // See other available attributes and what they do in date_api_elements.inc
            '#date_increment' => 15, // Optional, used by the date_select and date_popup elements to increment minutes and seconds.
            '#date_year_range' => '-3:+3', // Optional, used to set the year range (back 3 years and forward 3 years is the default).
            '#datepicker_options' => array(
                'changeMonth' => false,
                'changeYear' => false,
                'altField' => '#edit-leave-alt',
                'showOtherMonths' =>true,
                'selectOtherMonths' =>false,
                'altFormat' => 'D, M d, yy',
                'minDate' => 0,
            ), // Optional, as of 7.x-2.6+, used to pass in additional parameters from the jQuery Datepicker widget.
            '#attributes' => array('readonly' => 'readonly')

        );

$form['leave'] = array(
        '#type' => 'date_popup', // types 'date_popup', 'date_text' and 'date_timezone' are also supported. See .inc file.
        '#title' => t('Leave'),
        '#default_value' => date('Y-m-d'),
        '#date_format' => $format,
        '#required' => TRUE, // Added
        '#date_label_position' => 'within', // See other available attributes and what they do in date_api_elements.inc
        '#date_increment' => 15, // Optional, used by the date_select and date_popup elements to increment minutes and seconds.
        '#date_year_range' => '-3:+3', // Optional, used to set the year range (back 3 years and forward 3 years is the default).
        '#datepicker_options' => array(
            'changeMonth' => false,
            'changeYear' => false,
            'altField' => '#edit-leave-alt',
            'showOtherMonths' =>true,
            'selectOtherMonths' =>false,
            'altFormat' => 'D, M d, yy',
            'minDate' => 0,
        ), // Optional, as of 7.x-2.6+, used to pass in additional parameters from the jQuery Datepicker widget.
        '#attributes' => array('readonly' => 'readonly')

    );
    ?>

Here is my js code

(function($)  {
    Drupal.behaviors.ifly_search = {
        attach: function (context, settings) {
            $("#edit-leave-datepicker-popup-0").datepicker({
                onSelect: function(date,param) {
                    var data = new Date(param.currentYear, param.currentMonth, param.currentDay);
                    $("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data).val(date);
                },
            });
        }
    };
})(jQuery);

hmmm... you are repeating the "leave" element in the form definition? You probably wanted to do: "leave" and "return"? Anyway, the problem is not the onSelect method but how you set the datepicker option. — skarist, Aug 06 '14 at 14:44
possible duplicate of [changing minDate option in JQuery DatePicker not working](http://stackoverflow.com/questions/847287/changing-mindate-option-in-jquery-datepicker-not-working) — skarist, Aug 06 '14 at 14:53

skarist · Accepted Answer · 2014-08-07T07:14:24.193

0

Just to flesh out my comment. Try this instead:

(function($)  {
        Drupal.behaviors.ifly_search = {
        attach: function (context, settings) {
          $("#edit-return-datepicker-popup-0").datepicker({minDate: new Date()});
          $("#edit-leave-datepicker-popup-0").datepicker({
            onSelect: function(date,param) {
                var data = new Date(param.selectedYear, param.selectedMonth, param.selectedDay);
                $("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data).val(date);
            },
          });
        }
    };
})(jQuery);

edited Aug 07 '14 at 07:14

answered Aug 06 '14 at 14:44

skarist

1,030
7
9

in my view this is simply a bug with the datepicker. Of course, `.datepicker("option", "minDate", data)` should also work – skarist Aug 06 '14 at 14:47
ok I found a duplicate for this. I'll flag this as a duplicate. The basic problem is setting the option minDate for the datepicker – skarist Aug 06 '14 at 14:53
This code works from the first time, but only one time and nothing happens if I click again – bedrosenator Aug 07 '14 at 06:02
hehe, yes you are right. And you know what if we add a second line with the old format, i.e. `$("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data);`, immediately after the other one it works always. Some datepicker bug if you ask me. – skarist Aug 07 '14 at 07:08
Ok, changed the answer. It turns out that what is needed is both methods. One to init the minDate of the return-datepicker element, and then we use datepicker("option"). Question of what to use to init minDate. I used current Date. But of course it is also possible to do it like I describe in my comment above. – skarist Aug 07 '14 at 07:17

bedrosenator · Answer 2 · 2014-08-07T07:58:41.020

Skarist, thank you a lot! Here is the working code:

Drupal.behaviors.ifly_search = {
        attach: function (context, settings) {
            $("#edit-leave-datepicker-popup-0").datepicker({
                onSelect: function(date,param) {
                    var data = new Date(param.selectedYear, param.selectedMonth, param.selectedDay);
                    $("#edit-return-datepicker-popup-0").datepicker({minDate: data}).val(date);
                    $("#edit-return-datepicker-popup-0").datepicker("option", "minDate", data).val(date);
                },
            });
        }
    };

drupal 7 date_popup module (update minDate onSelect event)

2 Answers2