毛羽立たずにフォームを強化したいですか? 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 DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
結論

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