CSSだけで、アニメーションしながらゆったりと日付を選ぶデートピッカーです。右側のカレンダーアイコンをクリックすると下にカレンダー(2018年7月)が表示されます。本来はここから月を変更できるのですが、サンプルは2018年7月分のみになっています。日にちをクリックして選ぶと入力欄に入ります。表示は英米で多く使われる日付、月、年度の順になります。変更する場合は、カレンダーアイコンをクリックして再度日にちをクリックします。日にちの数字が入れ替わります。また、「リセット」をクリックすると最初の画面に戻ります。いずれの動きもアニメーション効果が付きます。
日にちを選んで下さい  7, 2018

 

 

引用と参考;https://codepen.io/shshaw/pen/pKpwWN
戻るボタン