Mobile Support

ネイティブの日付入力について

モバイルブラウザでアクセスした場合、自動的にネイティブの日付選択ボックスに変わります。

ユーザーはネイティブの日付選択ボックスを使い慣れているので、とても優れたUXを提供します。

特別な設定は不要です。onChangeのようなコールバックも同じように動きます。

しかし、ネイティブの日付選択では以下の機能のみに制限されています。

• 日付、日時の初期値設定
• 最小(最も早い)日付指定
• 最大(最も遅い)日付指定

そのため、特定の機能(例えば特定日を無効化)を利用した場合は、ネイティブ日付選択ではなく、flatpickrの日付選択機能が作動します。

もし常にネイティブの日付選択を無効化したい場合は(推奨しませんが)disableMobileオプションを有効化します。

デモ

モバイルブラウザでアクセスした場合も常にflatpickrを有効化します。

JavaScript

const config =  {
  disableMobile: "true"
}
flatpickr('.flatpickr', config);

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">