By mixerowsky


2019-02-10 19:06:46 8 Comments

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?

2 comments

@jrockowitz 2019-02-10 23:38:06

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

@Taggart Jensen 2019-02-10 23:09:22

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

so in your module you need ....
<?php
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) {
    makeChangesToDatePicker();
  }
  else {
    var myInterv = setInterval(function() {
      if (dateData.datepicker) {
        makeChangesToDatePicker();
        clearInterval(myInterv);
      }
    }, 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/

Related Questions

Sponsored Content

0 Answered Questions

How to set a default date when extending DateRangeItem FieldType plugin

  • 2018-12-17 15:35:39
  • Manuel
  • 38 View
  • 1 Score
  • 0 Answer
  • Tags:   8 datetime

1 Answered Questions

[SOLVED] How can I translate months of date field?

  • 2018-08-06 12:14:34
  • user84266
  • 475 View
  • -1 Score
  • 1 Answer
  • Tags:   8

2 Answered Questions

[SOLVED] Apply custom date formats to reporting for specific webforms and fields

  • 2017-10-13 18:29:26
  • Christia
  • 127 View
  • 0 Score
  • 2 Answer
  • Tags:   7 webforms datetime

2 Answered Questions

[SOLVED] How can I change the selectable years in a date field?

  • 2017-10-11 07:02:20
  • Patrick Kenny
  • 295 View
  • 1 Score
  • 2 Answer
  • Tags:   8 datetime

1 Answered Questions

Drupal form API, wrong date field format on mobile iOs / Android

  • 2017-10-05 08:23:36
  • Sébastien Gicquel
  • 246 View
  • 1 Score
  • 1 Answer
  • Tags:   8 forms datetime

3 Answered Questions

[SOLVED] How do I set the HTML5 date "min" attribute?

  • 2016-10-22 02:06:06
  • Megan
  • 846 View
  • 1 Score
  • 3 Answer
  • Tags:   8 datetime

1 Answered Questions

[SOLVED] Cannot change date input format in views exposed filter

  • 2014-08-19 11:23:25
  • ankles
  • 1764 View
  • 0 Score
  • 1 Answer
  • Tags:   views datetime

1 Answered Questions

[SOLVED] Control display of post date as standard field?

  • 2012-11-11 04:12:55
  • Kenny Wyland
  • 1423 View
  • 0 Score
  • 1 Answer
  • Tags:   7 datetime

0 Answered Questions

How to disable change of date field value in webform

  • 2011-12-16 11:59:08
  • Abhijeet
  • 592 View
  • 2 Score
  • 0 Answer
  • Tags:   webforms

Sponsored Content