Drupal - Automatically Set "To date" when "From date" Changes on Popup Calendar

Category: 

With a date field in Drupal, you can specify the 'To date' be the same as the 'From date' on the field settings. However, selecting a 'From date' on a node form does not automatically update the 'To date' to be the same value, and this is usually annoying for our patrons. Let's use some javascript to detect changes on our 'From date' field(s), then automatically set the 'To date' to the same date as the 'From date'.

Place this code in your custom javascript file:

(function ($, Drupal, window, document, undefined) {jQuery(document).ready(function(){
      // When the 'from date' is changed on the following date fields, set
      // the 'to date' equal to the 'from date'.
      var date_fields_default_to_from = new Array(
        'field_event_date',
        'field_event_date_range'
      );
      var css_selector = '';
      $.each(date_fields_default_to_from, function(index, field){
          css_selector += '#edit-' + field.replace(/_/g,'-') + '-und-0-value-datepicker-popup-0, ';
      });
      css_selector = css_selector.substring(0, css_selector.length - 2); // Remove last ', '
      $(css_selector).change(function(){
          $('#' + $(this).attr('id').replace(/value/g, 'value2')).val($(this).val());
      });
});})(jQuery, Drupal, this, this.document);

Any field machine name(s) we specify in the date_field_default_to_from array will automatically have its 'To date' set to the value of 'From date', whenever the 'From date' value changes.

For Drupal 6, the css selector is slightly different (because there is no "und" language code, so use this line instead:

css_selector += '#edit-' + field.replace(/_/g,'-') + '-0-value-datepicker-popup-0, ';

Comments

hey thanks for this code just wandering if you could help me set it so that the time to field gets set at + 12 hours from the from date? would really appreciate it! thanks again

tyler's picture

Hi Antoine, you'll have to take the value from the 'from date', then split apart the date and pull out the hour. Once you have the hour, add twelve to it (and probably use mod 24 on it to keep it within range, e.g. (from_hour+12)%24. Then if the new computed hour is greater than your 'from date' hour, then just set the same date with the new hour on the 'to date' field. If the new computed hour is less, then you'll have to roll over to the next day and use the computed hour for the 'to date'. I hope this sets you on the right path.

Here is your code re-written to be a little more flexible. You haven't accounted for multiple fields, etc.

(function ($) {
  Drupal.behaviors.site_visit_node_form = {
    attach: function(context) {
      $('.form-type-date-popup input[id*="datepicker"]', context).once('site_visit_node_form', function() {
        $(this).change(function() {
          $('#' + $(this).attr('id').replace(/value/g, 'value2')).val($(this).val());
        });
      });
    }
  };
}(jQuery));
 

tyler's picture

Thank you Colin! Next time I need this on a multi-date field I'll be sure to check out your code snippet and update the article with its goodness.

This doesn't work for me. I created a script.js and have it set to add the script in the theme's .info file, pasted this in there, added "field_date" into the array, cleared the site cache and nothing happens when I choose the From. Is there any thing else I may be missing?

tyler's picture

Verify your .js file is even being loaded by adding an alert("hello"); at the top of the file. Otherwise, I'd recommend the approach mentioned by Colin above. Other than that,  as you can see the article is a bit dated, so the date module may have changed the css/jquery selectors involved. Use your browser's html inspector to dig deeper.

Add new comment