web-dev-qa-db-ja.com

カレンダーポップアップでクリックできる日をカスタマイズする

Drupal 7にフォームAPIを使用してフォームを作成しています。現在、次のコードで通常のカレンダー入力フィールドを作成できます。

   $form['services_tab']['schedule_datepicker'] = array(
    '#title' => t('Pick the desired date'),
    '#type' => 'date_popup',
    '#date_year_range' => '0:0',
    '#date_format' => 'Y-m-d',
    '#prefix' => '<div id="datepicker-schedule">',
    '#suffix' => '</div>',
  );

現在、美しいカレンダーポップアップを表示できます。私が達成しようとしているのは、次のようなルールに基づいて特定の日付を有効または無効にすることです。すべての土曜日と日曜日を無効にします。または、祝日のリストに基づいて特定の日付からクリック状態を削除する...

これはPHPコーディングで実現できるものですか、それともjQueryで実行する必要がありますか？jQueryが解決策である場合、その方法に関するヒントをいただければ幸いです...カレンダーはテーブルですが、テーブルのセルにはIDやルールに基づいてそれらを無効にするのに役立つ何かがありません...

ありがとうございました。

formsdatetime
10
Marcos Buarque

'#datepicker_options'キーを使用して、いくつかの Datepicker options をphpからdate_popup要素に渡すことができます。

_<?php
$form['date'] = array(
  '#title' => t('Pick the desired date'),
  '#type' => 'date_popup',
  '#datepicker_options' => array(
    'minDate' => 0,
  ),
);
_

このメソッドを使用すると、ほぼすべてのオプションを渡すことができますが、Nikitが参照する回答に従って週末または休日を制限するために必要なbeforeShowDayのように、値として関数を受け入れるオプション： https：// stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid

したがって、JavaScriptが必要です。最初に、モジュールコードからカスタムjsファイルを含める必要があります。

_<?php
drupal_add_js(drupal_get_path('module', 'FOO') . '/FOO.js');
_

また、_FOO.js_にコードを提供して、date_popupモジュールで設定された設定を独自のオプションで拡張します。

以下は、ページ内のすべての日付ピッカーウィジェットの週末を無効にする基本オプションを追加する例です。

_(function ($) {
Drupal.behaviors.FOO = {
  attach: function (context) {
    for (var id in Drupal.settings.datePopup) {
      Drupal.settings.datePopup[id].settings.beforeShowDay = $.datepicker.noWeekends;
    }
  }
};
})(jQuery);
_

休日への拡張は、読者への練習問題として残されています:)

注：私の例でのFOOの3つの出現は、同じリテラルである必要はありません。つまり、_BAR.js_で_FOO.module_からBAZ動作を提供できます。

更新：上記のカスタム日の可用性を拡張するには、パラメーターで受け取った日のtrue/falseを返す関数を追加するだけです。

_(function ($) {
Drupal.behaviors.FOO = {
  attach: function (context) {
    for (var id in Drupal.settings.datePopup) {
      Drupal.settings.datePopup[id].settings.beforeShowDay = checkDate;
    }
  }
};

function checkDate(date) {
  if ((date.getDate() % 2) == 0) {
    return [false, 'Even days not available'];
  }
  else {
    return [true, 'Odd days are fine'];
  }
}
})(jQuery);
_

より完全な例は Date Restrictions モジュールにあります。

8
jonhattan

日付制限モジュールを使用しました。これは、固定日付、相対日付などのパラメーターの数に日付を制限するオプションを提供します。

0
cchanana