daterangepicker.js使ってみた.

daterangepicker.js

日付の範囲を入力するフォームを提供するjavascriptのライブラリ

f:id:miettal:20130913000714p:plain

<script src="js/daterangepicker.js"></script>
<input type="text" style="width: 300px" id="reservationtime" />
$('#reservationtime').daterangepicker({      
    //時刻も有効化
    timePicker: true,
    //指定できる範囲を最大7日に設定
    dateLimit:moment.duration(7, 'days'),
    //AM/PMでなく24時間表記を使う
    timePicker12Hour:false,
    //1分間隔で選択できるよう設定
    timePickerIncrement:1,
    //最初に表示される開始日
    startDate:moment().startOf('day'),
    //最初に表示される終了日
    endDate:moment().add('days', 1).startOf('day'),
    //日付フォーマット
    format:'YYYY/MM/DD HH:mm',
    showDropdowns: false,
    //今日,昨日,過去1週間をボタンとして提供
    ranges: {
     'Today': [moment().startOf('day'), moment().add('days', 1).startOf('day')],
     'Yesterday': [moment().subtract('days', 1).startOf('day'), moment().startOf('day')],
     'Last 7 Days': [moment().subtract('days', 7).startOf('day'), moment().startOf('day')],
    },
  },
  //コールバック関数,開始日と終了日が引数として渡される.
  function(s, e){
    console.log(s)
    console.log(e)
  }
);