DeskyCalendar で日付の選択を強化: バニラ JS ソリューション

毛羽立たずにフォームを強化したいですか? DeskyCalendar は、純粋なバニラ JavaScript で作られた、ミニマリストで応答性の高い日付ピッカーです。プロジェクトに負担をかけることなく、日付選択プロセスにスタイルと機能性を追加するように設計されています。

デモとプロジェクトのページ

デモページ -> https://danruggi.github.io/datepicker/
プロジェクトリンク -> https://github.com/danruggi/datepicker

主な特長

?フルレスポンシブ: どのデバイスでも見栄えが良く、カレンダーが潰れることはもうありません。
?二重 / 単一形式: 単一の日付を選択するか、範囲を選択するかを簡単に選択できます。
? 「任意の日付」オプションを追加: ユーザーはフィルターやレポートに最適な任意の日付を自由に選択できます。
?日付を無効にする: 過去または将来の日付の選択を禁止し、すべてをチェックします。
?クリック時に外部関数を実行: 日付が選択されたときにカスタム アクションをトリガーしたいですか?簡単簡単!
クイックセットアップ

1. CSS と JS を含める

これらのリンクを HTML にドロップするだけです:

2. 入力を追加します

入力フィールドを作成します:

3. カレンダーを初期化する

簡単な JavaScript 行で設定します。

新しい DeskyCalendar({'myID': {}});

最小限の例

2 つの列

ダブル日付選択に簡単に切り替える:

new DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

日付を無効にする

日付を制限したいですか?

const d = new Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
結論

DeskyCalendar は、軽量かつ効率的でありながら、わずか数行で日付選択のニーズに洗練さとシンプルさをもたらします。このエレガントなソリューションを使用してフォームをレベルアップしましょう。コーディングを楽しんでください!

以上がDeskyCalendar で日付の選択を強化: バニラ JS ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。