コニファ・ロゴ

csstest:CSS list要素のmarkerを括弧付きの数字にする

jQueryプラグインのjquery.flickEndless.jsとCSSで作られたdatePickerで、iOSでよく見かける入力方式のドラムスクロール型(ドラムロール型という人もいるようです)です。見た目がとてもきれいなので、掲載させていただきました。

日付は、年、月、日のそれぞれをマウスでドラッグしてスクロールさせて縦方向真ん中のラインにあわせて決定していきます。実際の入力は、数値をキーボードから打つ方が早そうですが、こちらのほうが凝った雰囲気を出すことができます。

決定したところで、設定ボタンをクリックすれば、入力値として残ります。この例ではその値をアラートで出します。また、右下のresetボタンをクリックすると今日の日付(赤文字)に戻ります。

ドラムスクロール型のdatePicker

year
month
day
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

 

戻るボタン