VueでもPHPでもその他でも使える日時ピッカー「input-dt」

日時選択できるデイトピッカーを作ったので紹介いたします。
ぜひ使ってみてください。

https://github.com/itte1/input-dt

特徴として、カスタム要素として実装しています。そのため、Vue.jsをはじめとする様々なフレームワークで使うことができます。（Reactでも使えますが書き方が少し複雑です。簡単に書ける方法をご存じの方いれば教えてください。）
PHPのようなサーバーサイド言語だけでも使えます。

更にIntlを使っているので、日本語化しなくても、ブラウザの言語設定に合わせて勝手にローカライズされます。

使い方

GitHubを参考に、NPMもしくはCDNからインポートします。input-dt-min.jsとinput-dt-min.cssをGitHubから直接ダウンロードしてもOKです。

最小のコードはこんな感じです。

<input-dt>
  <input type="text" input-dt>
</input-dt>

日付	時間

作った経緯

デイトピッカーは色々あるのに、なぜこれを作ったのでしょうか。

実は今まで、日時入力には悩まされてきました。私はよくVueを使っているのですが、Vue2の頃は割といいと思えるデイトピッカーがあったのですが、Vue3になってからそれらの多くが使えなくなりました。リッチなデイトピッカーはあるのですが、カレンダーで日を選択して、時分秒をポンポンポンと選択していける使いやすさを持つものがあまり無いのです。大手flatpickrも時間の選択に関しては、自分が使いやすいと思えるものではありませんでした。

デイトピッカーにリッチさは正直求めていません。とはいえ、<input type="datetime-local">は機能不足です。

Vue2からVue3の移行を何度かやりましたが、これが毎度悩みました。
flatpickrで我慢して、時間の選択だけ別の物を探すといった感じです。

そして、Jitoでflatpickrが上手く動かなかったことで、いい加減疲れたから自分で作ろうと決意した次第です。

どうせ作るならと、フレームワーク依存が無く、自由度が高く、後発の特権として自動ローカライズを取り入れました。ついでに、日付の期間を入力するのに、いちいち実装するのがいつも面倒なので複数の日付入力が同期するようにしました。
そんなことをしてたら完成するのに3週間かかってしまいました。その分、そこそこ良いものができたと思います。