Set initial value with wickedpicker （wickedpicker で初期値を設定する）

時間登録フォームのtimepickerを導入したかったのですが、見た目上一番よかったのが「wickedpicker」だったので実装していたのですが、初期値の入れ方がわからない。編集の際に既存で入っていたデータを全て上書きしてjsで設定した初期値だけが反映されてしまい、動的に変更ができなかった。。

結論からいうと、この記事を参考にしたら動きました。
WickecdPickerで複数入力ボックスの移動時ダイアログをhideする – RUGOH

# coffeeScript で書いてます。

  $('.timepicker').each ->
    default_time = $(this).val()
    if default_time is ""
      default_time = "10:00" # 値がなければ設定する

    options = # オプション
      now: $(this).val() # 既存の値をinputのval()から取得し、timepickerの初期値にする
      minutesInterval: 10
      twentyFour: true
      title: "時間"
    $(this).wickedpicker(options)

---

ここにたどり着くまでに、いくつか調査したので記載します。

v0.4.1 なら初期値設定できるよ、というissueを発見

github.com やってみたけど動かない！＞＜

---

timepickerのオプションを紹介する

var options = {
　now: "12:35", //hh:mm 24時間形式で記載、初期値は現在時刻（hh：mm、コロンが大文字だと動かない可能性あり）
　twentyFour: false, //24時間表記を有効にする（初期値：false => 12時間表記）
　upArrow: 'wickedpicker__controls__control-up', //上矢印のスタイルを指定する
　downArrow: 'wickedpicker__controls__control-down', //下矢印のスタイルを指定する
　close: 'wickedpicker__close', //閉じるのスタイルを指定する
　hoverState: 'hover-state', //The hover state class to use, for custom CSS
　title: 'Timepicker', // Wickedpickerのタイトル
　showSeconds: false, //秒を表示する（初期値：false）
　secondsInterval: 1, //秒の間隔を変更します。（初期値：1）
　minutesInterval: 1, //分の間隔を変更します。（初期値：1）
　show: null, //Wickedpickerが表示されたときに呼び出される関数
　clearable: false, //フォーム内に時間を「×」で削除するボタンを表示させるか？  };

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