0

I want to customize a jQuery datapicker in Drupal 7. I found code to set an event:

(function ($) {
Drupal.behaviors.only_monday = {
  attach: function (context, settings) {
   // $( ".selector" ).datepicker( "option", "showWeek", true );
   $.datepicker._defaults.beforeShowDay = onlyMonday;
    function onlyMonday ( date ) {
      if ( date.getDay() == 1 ) {
        return [true, 'ui-datepicker-days-cell'];
      }
      else {
        return [false, 'ui.datepicker-unselectable'];
      }
    }
  }
};
}(jQuery));

This works great, except for commented line. According to the jQuery docs that line (added by myself) should make visible the numbers of the weeks:

$( ".selector" ).datepicker( "option", "showWeek", true );

The context from within Drupal is probably different. But I have no knowledge of js :-(

In what way does this code for setting an option has to be adjusted ?

1

2 Answers 2

2

Your are working within a Drupal behavior that could be reapplied several times on the DOM tree, in order to avoid processing the same element several times you should limit the $($selector) call to the passed-ind `context and use a marker CSS class for already processed class. Something like

$('.selector:not(.only-monday-processed)').addClass('only-monday-processe').doSomethingwithTheElements();

To defines then set the datepicker options from Drupal server-side PHP, you need to store the selector(s) and options in the settings object received by your behavior attach function using the drupal_add_js() function or the #attached property of your form/render array element. Then your function can use the selector to apply the option to the element. Something like

In your module code, store the selector and options in settings:

drupal_add_js(array('myModule' => array('.selector' => array('showWeek' => TRUE))), 'setting');

In your JavaScript, for each stored selector, apply the datepicker options:

(function ($) {
  Drupal.behaviors.only_monday = {
    attach: function (context, settings) {
      var selector;
      if (typeof settings.myModule === 'object') {
        for (selector in settings.myModule) {
          if (settings.myModule.hasOwnProperty(selector)) {
            $(selector, context).filter(':not(.only-monday-processed)')
              .addClass('only-monday-processe')
              .datepicker('option', settings.myModule[selector]);
          }
        }
      }
    }
    // ...
  };
}(jQuery));
6
  • I cannot get this to work. I added the drupal_add_js() code to my module. I replaced my JS code with your JS code. In both cases I replaced 'myModule' with the name of my module. Like I said, I still do not see the numbers of the week, especially this line (and your remarks about it) do not have any meaning to me: $('.selector:not(.only-monday-processed)').addClass('only-monday-processe').doSomethingwithTheElements();. I have not enough knowledge of JS to understand this. Is it just an explanation? It is also in your JS code which I added. Do I have to modify it?
    – Gijs
    Aug 5, 2011 at 23:32
  • There's a small bug $('.selector:not(.only-monday-processed)').addClass('only-monday-processed').doSomethingwithTheElements();, a d was missing in the addClass part ;)
    – tostinni
    Aug 6, 2011 at 0:06
  • I added the d, but that did not make it work.
    – Gijs
    Aug 6, 2011 at 11:57
  • Yep, this is part of the explanation and not part of the solution. The larger JavaScript code at the end of my answer contains similar behavior. Also, you shouldn't use an answer to reply to another answer. drupal.stackexchnage.com is not a forum. Aug 6, 2011 at 13:32
  • 1
    I could not reply, only answer. Strange and confusing. So I had no choice. Maybe because my question was migrated while I still was not registered on Stackexchange.
    – Gijs
    Aug 6, 2011 at 17:33
1

Via '#datepicker_options':

First we add a callback to the #process on date field:

/**
 * Implements hook_element_info_alter().
 */
function MODULE_OR_THEME_element_info_alter(&$type) {
  if (isset($type['date_popup'])) {
    array_unshift(
      $type['date_popup']['#process'],
      '_process_date_popup_helper'
    );
  }
}

And now in the helper we can set any js option:

function _process_date_popup_helper($element, &$form_state, $form) {
  $element['#datepicker_options']['changeMonth'] = FALSE;
  $element['#datepicker_options']['changeYear'] = FALSE;

  return $element;
}
1
  • Since you're setting static options, you actually don't need the process callback. You can do all this in hook_element_info_alter() Mar 18, 2014 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.