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

Answer 2

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