ドラムロールのタイムピッカー「pickerjs」を複数箇所で使用できるようにする

デモ

実装

普通にjqueryのeachでぶん回すだけです

  var target = ".time";
  $(target).each(function(){
    var id = $(this).attr("id");
    new Picker(document.getElementById(id));
  });

注意

作者は複数箇所での使用はサポートしていないと言っています。
Gitのリポジトリがアーカイブにされてて追記できない状態だったので、
ここに書くことにしました。

とりあえず、できましたよっていう報告だけ。

おまけ

ドラムロールで選択した値を使って色々したいとか、あると思います。
pickイベントを使うことで、値を拾うことができます

このライブラリの情報が少ないのでソースコード全文掲載します
※動かすにはjQueryとmoment.jsが必要です

function TimePicker()
{
  var target = '.time';

  var now = moment();
  var dateFormat = {
    zone   : 'Asia/Tokyo',
    year   : now.year(),
    month  : now.month(),
    day    : now.day(),
    hour   : now.hour(),
    minute : 0,
    second : 0
  };

  var date = moment().set(dateFormat);

  $(target).each(function(){
    var self = this;
    var id = $(self).attr('id');

    var picker = new Picker(document.getElementById(id), {
      format: 'HH:mm',
      controls: true,
      headers: true,
      date : new Date(date),
      increment: {
        minute : 15
      },
      text: {
        title: '<span>時間を選択してください</span>'
      },
      pick(event) { // OKボタンを押した時に発火
        var dt = picker.getDate();
        var momentInstance = moment(dt);
        var time = momentInstance.format("HH:mm");

        console.log(time);

        // なんかdiv要素書き替えるとかそういうの
        $(self).text(time);
      }
    });
  })
}

new TimePicker();

さらにおまけ

ヘッダーに入るテキストには、HTMLタグが使用できます。
HTMLタグが使用できるということは、クリックイベントを仕込むことが出来るということです。
例えば、ヘッダーにボタン要素を設置して、クリックしたら任意のテキストを設定するといったことは、次のようなやり方で出来ます。
(もっと良い方法があったら誰か教えてください)

    $(target).each(function(){
      var self = this;
      var id = $(self).attr('id');

      var picker = new Picker(document.getElementById(id), {
        // その他のオプション値は省略します。↑のソースコードを参考にしてください
        text: {
          title: '<span>時間を選択してください</span> <button type="button" class="btn-no-return">NR(直帰)</button>'
        },
        show(event){ // モーダルが開き始めた時に発火
          //
        },
        shown(event){ // モーダルが開き終わった時に発火
          $(self).addClass("active-cell"); // 直帰ボタンイベント用
        },
        hide(event){ // モーダルが閉じ始めた時に発火
          //
        },
        hidden(event){ // モーダルが閉じ終わった時に発火
          $(self).removeClass("active-cell"); // 直帰ボタンイベント用
        },
        pick(event){ // OKボタンを押した時に発火
          var dt = picker.getDate();
          var momentInstance = moment(dt);
          var time = momentInstance.format("HH:mm");
          console.log(time);

          // なんかdiv要素書き替えるとかそういうの
          $(self).text(time);
        }
      });

      // 直帰ボタンを押した時
      var btnNR = '.btn-no-return';
      $(btnNR).click(function(){
        $('.active-cell').text("NR");
        picker.hide();
      })
    })