How to set jquery datapicker options from within Drupal?

Question

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 ?

Answer 1

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