ピッカー - Materialize

日付ピッカーを使用すると、ユーザーはインタラクティブなカレンダーから日付を選択できます。

生年月日


  <input type="text" class="datepicker">

初期化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.datepicker').datepicker();
  });

オプション

名前	タイプ	デフォルト	説明
autoClose	ブール値	false	日付を選択すると自動的にピッカーを閉じます。
format	文字列	'mmm dd, yyyy'	入力フィールド値の日付出力形式。
parse	関数	null	現在の入力文字列から日付オブジェクトを作成するために使用されます。
defaultDate	日付	null	最初に開いたときに表示する初期の日付。
setDefaultDate	ブール値	false	defaultDateを初期選択値にします。
disableWeekends	ブール値	false	週末のいずれかの日付の選択を禁止します。
disableDayFn	関数	null	特定の日を無効にするカスタム関数。
firstDay	数値	0	週の最初の日（0：日曜日、1：月曜日など）。
minDate	日付	null	選択できる最も早い日付。
maxDate	日付	null	選択できる最も遅い日付。
yearRange	数値 \|\| 配列	10	両側の年の数、または上限/下限の範囲の配列。
isRTL	ブール値	false	日付ピッカーをRTLに変更します。
showMonthAfterYear	ブール値	false	日付ピッカーのタイトルに年を月の後に表示します。
showDaysInNextAndPreviousMonths	ブール値	false	次の月または前の月に該当するカレンダーグリッドの日数を表示します。
container	要素	null	カレンダーを表示するDOM要素を指定します。デフォルトでは、入力の前に配置されます。
showClearBtn	ブール値	false	日付ピッカーにクリアボタンを表示します。
i18n	オブジェクト	i18nドキュメントを参照してください。	国際化オプション。
events	配列	[]	`Date.toDateString()`によって返される文字列の配列で、指定された日にイベントがあることを示します。
onSelect	関数	null	日付が選択されたときのコールバック関数。最初の引数は新しく選択された日付です。
onOpen	関数	null	日付ピッカーが開かれたときのコールバック関数。
onClose	関数	null	日付ピッカーが閉じられたときのコールバック関数。
onDraw	関数	null	日付ピッカーのHTMLが更新されたときのコールバック関数。

日付形式オプション

これらのオプションをformatオプションで使用して、日付文字列をカスタマイズします。

キー	説明	出力
d	月の日の日付。	1-31
dd	月の日の日付（2桁）。	01-31
ddd	i18nオプションで設定された略式の曜日の名前。	Sun-Sat
dddd	i18nオプションで設定された完全な曜日の名前。	Sunday-Saturday
m	年の月の数値。	1-12
mm	年の月の数値（2桁）。	01-12
mmm	i18nオプションで設定された略式の月の名前。	Jan-Dec
mmmm	i18nオプションで設定された完全な月の名前。	January-December
yy	2桁の年。	17
yyyy	4桁の年。	2017

日付ピッカーの国際化オプション

これらのオプションをi18nオプションで使用して、日付ピッカーをローカライズします。

キー	テキスト
cancel	'Cancel'
clear	'Clear'
done	'Ok'
previousMonth	'‹'
nextMonth	'›'
months	[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
monthsShort	[ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
weekdays	[ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]
weekdaysShort	[ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
weekdaysAbbrev	['S','M','T','W','T','F','S']

プロパティ

名前	タイプ	説明
el	要素	プラグインが初期化された入力要素。
options	オブジェクト	インスタンスが初期化されたオプション。
isOpen	ブール値	ピッカーが開いているかどうか。
date	日付	選択された日付。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。
  var instance = M.Datepicker.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.datepicker').datepicker('methodName');
    $('.datepicker').datepicker('methodName', paramName);
  */
            

.open();

日付ピッカーを開きます


instance.open();

.close();

日付ピッカーを閉じます


instance.close();

.toString();

選択された日付の文字列表現を取得します


instance.toString();

.setDate();

日付ピッカーに日付を設定します

引数

日付（オプション）：日付ピッカーに設定する日付。


instance.setDate(new Date());

.gotoDate();

日付ピッカーの特定の日付に日付表示を変更します

引数

日付：日付ピッカーに表示する日付。


instance.gotoDate(new Date());

.destroy();

プラグインインスタンスを破棄し、終了します


instance.destroy();

時間ピッカーを使用すると、ユーザーはインタラクティブな時計から時間を選択できます。

ランチタイム


  <input type="text" class="timepicker">

初期化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.timepicker');
    var instances = M.Timepicker.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.timepicker').timepicker();
  });

オプション

名前	タイプ	デフォルト	説明
duration	数値	350	時間/分ビューへの/からのトランジション時間。
container	文字列	null	カレンダーを表示するDOM要素のセレクタを指定します。デフォルトでは、入力の前に配置されます。
showClearBtn	ブール値	false	時間ピッカーにクリアボタンを表示します。
defaultTime	文字列	'now'	時間ピッカーに設定するデフォルトの時間 'now' または '13:14'
fromNow	数値	0	defaultTimeからのミリ秒オフセット。
i18n	オブジェクト	i18nドキュメントを参照してください。	国際化オプション。
autoClose	ブール値	false	分を選択すると自動的にピッカーを閉じます。
twelveHour	ブール値	true	24時間制の時計ではなく、12時間制のAM/PM時計を使用します。
vibrate	ブール値	true	時計の針をドラッグするときにデバイスを振動させます。
onOpenStart	関数	null	モーダルが開かれる前に呼び出されるコールバック関数。
onOpenEnd	関数	null	モーダルが開かれた後に呼び出されるコールバック関数。
onCloseStart	関数	null	モーダルが閉じられる前に呼び出されるコールバック関数。
onCloseEnd	関数	null	モーダルが閉じられた後に呼び出されるコールバック関数。
onSelect	関数	null	時間が選択されたときのコールバック関数。最初の引数は時間、2番目の引数は分です。

時間ピッカーの国際化オプション

これらのオプションをi18nオプションで使用して、時間ピッカーをローカライズします。

キー	テキスト
cancel	'Cancel'
clear	'Clear'
done	'Ok'

プロパティ

名前	タイプ	説明
el	要素	プラグインが初期化された入力要素。
options	オブジェクト	インスタンスが初期化されたオプション。
isOpen	ブール値	ピッカーが開いているかどうか。
time	文字列	選択された時間。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。
  var instance = M.Timepicker.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.timepicker').timepicker('methodName');
    $('.timepicker').timepicker('methodName', paramName);
  */
            