一月 26, 2016 | 前端與Vue

如何控制Date Popup模組的選擇日期

時常我們會需要選擇時間,可是讓使用者手動輸入可能會格式不統一,或是亂打一通的情況,這個時候我們必須要有一個統一的格式

前言

時常我們會需要選擇時間,可是讓使用者手動輸入可能會格式不統一,或是亂打一通的情況,這個時候我們必須要有一個統一的格式,Drupal有一個Date模組可以幫助我們來達成這件事情。

使用情境

我們有一個自訂的shipping method,並且我們有一個自訂的form,必需要讓使用者填入希望到貨時間,並且用date的popup日曆選擇日期,並且會有一些日期選擇的限制。

作法

首先我們先建好一個自己的shipping method之後我們就必須要寫一個自己的form

$form = array();
$format = 'Y-m-d';
$pane_values['service_details'] += array(
        'time' => '',
        );
    $form['time'] = array(
        '#type' => 'date_popup',
        '#date_type' => DATE_DATETIME,
        '#title' => t('請問您希望宅配到府時間'),
        '#date_format' => $format,
        '#date_label_position' => 'within',
        '#date_year_range' => '0:+2',  //最久只能選到兩年後
        '#required' => TRUE,
    );

此時你應該就會有一個popup的日曆了

遇到的問題

這個時候我們會遇到一個問題,如果我想要讓可以選擇的日期必須是從明天開始該怎麼辦?,而且我還想要一個星期的某幾天不能被選擇到,這個時候我們就必須要自己寫javascript來改寫掉日曆了。

解法

首先我們必須要自己建立一個js檔並引入,所以你的module應該會是這樣

drupal_add_js(drupal_get_path('module', 'hellosanta') . '/santa.js');
$form = array();
$format = 'Y-m-d';
$pane_values['service_details'] += array(
        'time' => '',
        );
    $form['time'] = array(
        '#type' => 'date_popup',
        '#date_type' => DATE_DATETIME,
        '#title' => t('請問您希望宅配到府時間'),
        '#date_format' => $format,
        '#date_label_position' => 'within',
        '#date_year_range' => '0:+2',  //最久只能選到兩年後
        '#required' => TRUE,
    );

之後我們就可以在自訂的js寫入程式

function select_date(date) {
    var day = date.getDay();
    if (day == 1 || day == 0) {
        return [false];
    } else {
        return [true];
    }
}
(function($) {
Drupal.behaviors.santa = {
        attach: function(context) {
            for (var id in Drupal.settings.datePopup) {
                    Drupal.settings.datePopup[id].settings.minDate = +1;
                    Drupal.settings.datePopup[id].settings.beforeShowDay = select_date;
            }
        }
    };

})(jQuery);

此時你的popup日曆就已經被改寫掉了

這樣一來使用者就沒辦法點選到被限制的日期囉
如果想要限制其他的日期可以參考這篇How to Disable Dates in Jquery DatePicker – A Short Guide