DatePickerの実装例

JavascriptのDatePickerの実装例です。

デモ

インストール

npm i @tkzo/js-date-picker --save

使い方

1. スタイルをロードします。

   <link rel="stylesheet" href="./date-picker.css">

2. Input要素を準備します。

   <input type="text" name="date" readonly>

3. モジュールをインポート

   JavaScript

   import { DatePicker } from './date-picker.js';

   TypeScript

   import { DatePicker } from '@tkzo/js-date-picker';

4. 適用したいInput要素のセレクタをDatePickerのコンストラクタに渡してインスタンスを生成します。

   // DatePickerを初期化
   const picker = new DatePicker('[name="date"]');
   // デフォルトの日付を設定する場合
   const defaultDate = new Date(2022, 3, 15);
   // Input要素へ値を反映したくない場合、第二引数に`false`を渡す
   picker.setDate(defaultDate, false);
   // 現在の日付を取得
   const currentDate = picker.getDate();