I have to change number of months that's shown in datepicker of my date field in Webform, on desktop I need 2 months, but on mobile just 1.

I'm not able to control that using JS, so I created patch for Webform module to change that and show 2 months.

Is there some solution for this, how I can change stuff like this using JS even I initialized it through field settings in Webform module?


You can set default datePicker's options by defining Drupal.webform.datePicker.options via the CSS/JS tab.

@see https://cgit.drupalcode.org/webform/tree/js/webform.element.date.js

Date picket options


You can override it with js .. the trick is when it is when your js is attached.

so in your module you need ....
function MYMODULE_form_alter(&$form, FormStateInterface $form_state, $form_id){
  if ($form_id === 'webform_submission_YOURFORMID') {
    $form['#attached']['library'][] = 'YOURMODULE/mymodule.fix-datepicker';

then in your js please try some thing like..

(function ($, Drupal, drupalSettings) {
  'use strict';
  Drupal.behaviors.fixMyDatepicker = {
attach: function (context) {

  var dateElement = $('#edit-1'); // id of your date picker 
  var dateData = dateElement.data();
  if (dateData.datepicker) {
  else {
    var myInterv = setInterval(function() {
      if (dateData.datepicker) {
    }, 100);

    function makeChangesToDatePicker() {
      //@TODO here check if mobile .
      var settings = dateData.datepicker.settings;
      settings.maxDate = '2019-03-11';
 })(jQuery, Drupal, drupalSettings);

the above worked for me. remember datepicker is just: https://jqueryui.com/datepicker/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.