log > input[type=date]にPikadayを使う
input[type=date]にPikadayを使う
input要素にカレンダーを表示するにはtype=dateにすればよい。ただし2016年9月時点ではChromeとEdgeのみ対応しており、SafariとFirefoxとIEは対応していない。
以前同じものを作ったときはjQuery+jQueryUIでできた気がするのだが、脱jQueryの動きもあるので別のやり方でやってみることにした。なお、jQueryを使わないライブラリは、Vanilla Listから探すことができる。
今回はPikadayとModernizrを使うことにした。なお、Pikadayはフォーマットの際にMomentjsが必要なようだ。
簡単なサンプルを用意した。貼り付けだとなぜかポジションが効かないので、Codepenで直接見てほしい。
input要素にフォーカスするとカレンダーが表示され、選択でYYYY-MM-DD形式の文字列が入力される。すでにdateが定義されているかは、1行目のif (!Modernizr.inputtypes.date)で判断している。（そのためChromeやEdgeでは標準のカレンダーが表示される。）
ファイル数は変わらないが、ファイルサイズが削減され多少読み込みが早くなったと思われる。