◆ 地味に困ったところ

flatpickr は jQuery なしで高機能な datetimepicker です
標準以外で日時選択の input を使うならとりあえずこれ なものです
依存パッケージないし軽いし framework 向けなので lit-html や hyperhtml でも使いやすい優れものです

ただ使ってるとやっぱり不便に感じるところもいくつかありました

カレンダーが大きい

カレンダーがけっこう大きめで場所とるんですよね
Pikaday くらいコンパクトなサイズが好みです

テーマがあるのですが色くらいでサイズ調整はなさそうでした

配置場所は上か下だけ

配置する場所を選ぶ position というオプションがあります
ただ input の上か下しか選べませんでした
左や右には出せません
場所的に上は出せないけど 下にはカレンダーと同時に見たいものがあったりするとちょっと不便です

また上下を選んだ上で一応左右のオプションもあるのですが center しか認識してくれません
ソースコード上で center しか扱ってませんでした
center を選べば input に対してセンタリングされます
何も指定しないと左端が基準になります
ちなみに私がやりたかったのは right 指定です
input が右端に来ると自動でずらして配置してくれるので right オプションがなくてもはみ出ることは無いと思います

スクロールに付いてこない

Example ページだとカレンダーでてる状態でスクロールするとついてきたので そういうものだと思ってました
しかし実際に使ってみたらついてきませんでした

実装を見ると デフォルトでは body 直下にカレンダーを表示する要素を作って position: absolute で input の近くに配置しています
場所が近いだけで表示方法は完全に独立したものです
ページ全体がスクロールすれば body 直下の absolute 指定は一緒にスクロールされていきますが overflow: auto でつくったコンテナのスクロールは body 直下のカレンダーのコンテナとは関係ないのでカレンダーは場所が固定のまま overflow: auto のコンテナ内だけ (input) がスクロールされます

appendTo オプションがあるので body じゃなく同じコンテナの中に入れると解決できるかもしれません
今回は body 直下にあったほうがよかったのでこれは諦めました
なんとなく気になったものの試してないのですが appendTo で入れた先の親が position: relative だった場合などにも対応してるのでしょうか?

maxDate と time

これはバグっぽい感じがします
maxDate で選択できる最大の日付を指定できます
ここで 1/31 10:00 を最大にしていた場合 1/31 が選べて 2/1 は選べない挙動です
日付の選択後の時刻選択では 10:00 以降も選択できて 16:00 とかも選べます
maxTime じゃなくて maxDate なので時刻部分には影響しないこの挙動が正しいと思っていました

しかし setDate メソッドや defaultDate オプションを使って画面以外から日付を選択しようとすると問題がおきます
maxDate と同じ日付でも maxDate の時刻よりあとなら不正なデータとして扱われるようで input は空になります
画面からの選択もできないならわかりますが プログラム的な入力でのみ受け付けてくれません
プログラムから値を入れるなら わざわざ maxDate の時刻部分を 23:59:59 にしないといけないです

今後に期待

このライブラリはユーザが多く更新も活発ですし 今後の更新に期待ですね