web-dev-qa-db-ja.com

JSからWebformの日付フィールド（datepicker）を制御する

Webformの日付フィールドの日付ピッカーに表示される月数を変更する必要があります。デスクトップでは2か月必要ですが、モバイルでは1か月です。

私はJSを使用してそれを制御することができないので、それを変更して2か月を示すWebformモジュールのパッチを作成しました。

これに対する解決策はありますか、Webformモジュールのフィールド設定で初期化した場合でも、JSを使用してこのようなものをどのように変更できますか？

8javascriptwebformsdatetime
1
mixerowsky

CSS/JSタブでDrupal.webform.datePicker.optionsを定義することで、デフォルトのdatePickerのオプションを設定できます。

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

Date picket options

1
jrockowitz

あなたはそれをjsで上書きすることができます...あなたのjsが接続されているときが秘訣です。

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

それからあなたのjsで次のようなことを試してください...

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

上記は私のために働いた。日付ピッカーは次のとおりです： https://jqueryui.com/datepicker/

1
Taggart Jensen