忘れないように記録しとこ

カバの樹

Timepicker系ライブラリ「Wickedpicker」を使ってみた

2019年4月10日

完全版を表示する

はじめに

先日システムを組んでいる時に時間入力が必要になり、時間入力系timepickerライブラリを探してみました。

おそらく一番有名なのは、datetimepickerなのかな？と思いました。

それを使いたかったのですが、コーダーから上がってきたCSSがdatetimepickerとぶつかって、スマホ用のレイアウトが崩れるという問題が発生しました。

現場が絶賛炎上中だったので、仕方なく別のライブラリを探しました。

そこで見つけたのが「Wickedpicker」です。

 

環境

jQuery: 3.3.1

wickedpicker: 0.4.1

 

Wickedpicker

 

 

「Wickedpicker」ライブラリは非常にシンプルなjQuery製Timepickerライブラリです。

このライブラリには以下の特徴があります。

  • シンプルなユーザーインターフェース
  • 低侵襲CSS、入力フィールドにはスタイルは適用されません
  • 軽量
  • 実装が簡単
  • ページ上のすべてのインスタンスは同じタイムピッカーセレクタを使用し、重複はしません。
  • クリック＆クリック＆ホールドをサポートし、素早い選択が可能
  • アクセシビリティ向上のためのキーボードイベント

 

ダウンロード

bowerを使って以下のコマンドでインストールします。

$ bower install wickedpicker

もしくは

<link href="https://cdn.jsdelivr.net/npm/wickedpicker@0.4.3/dist/wickedpicker.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/wickedpicker@0.4.3/dist/wickedpicker.min.js"></script>

 

Githubから直接ダウンロードします。

https://github.com/ericjgagnon/wickedpicker

 

使い方

基本的な使い方は以下になります。

 

Script

var options = {
  now: "12:00", //hh：mm 24時間形式のみ、デフォルトは現在時刻
  twentyFour: true, //24時間形式を表示します。デフォルトはfalseです。
  title: '日付入力', //Wickedpickerのタイトル
  minutesInterval: 5, //分間隔を変更します。デフォルトは1です。
};

$('.timepicker').wickedpicker(options );

 

HTML

<input type="text" name="timepicker" class="timepicker"/>

 

サンプル

>>専用ページで確認する

 

オプション

オプション 説明
now mm 24時間形式のみ、デフォルトは現在時刻
twentyFour 24時間形式を表示します。デフォルトはfalseです。
upArrow カスタムCSSに使用する上矢印クラスセレクタ
downArrow カスタムCSSに使用する下矢印クラスセレクタ
close カスタムCSSに使用するクローズクラスセレクタ
hoverState カスタムCSSに使用するホバー状態クラス
title Wickedpickerのタイトル
showSeconds 秒を表示するかどうか
timeSeparator 時間と分の間に入れる文字列
secondsInterval 秒数を変更します。デフォルトは1です。
minutesInterval 分間隔を変更します。デフォルトは1です。
beforeShow Wickedpickerが表示される前に呼び出される関数
afterShow Wickedpickerが閉じられたり隠されたりした後に呼ばれる関数
show Wickedpickerが表示されたときに呼び出される関数
clearable ピッカーの入力をクリア可能にする

 

メソッド

パラメーターにtimeを設定することで対象の値を取得することができます。

$('.timepicker').wickedpicker('time');
//11：00

 

複数の入力フィールドが同じクラスを持ち、Wickedpickerをインスタンス化する場合は、選択したいtimepickerのインデックスを渡します。

$('.timepicker').wickedpicker('time',0);
//11：00

$('.timepicker').wickedpicker('time',1); 
//20：00

 

まとめ

Wickedpickerは、非常にシンプルなtimepickerライブラリなので使い易いと思います。

ぜひとも使ってみてください。

 

追記

Wickedpickerをボタンを押して呼び出す方法を記事にしました。
合わせて読んで下さい。

https://www.kabanoki.net/2882

 

  • B!