matsukaz's blog

Agile, node.js, ruby, AWS, cocos2d-xなどなどいろいろやってます

datePicker

jQuerydatePickerってプラグインがかなりカッコいいです。もろもろの設定をするとこんな感じ。

曜日や月をローカライズできるので分かりやすいし、JSで制御すれば期間指定の前範囲と後範囲で無効な日付は指定できないようにも。画像のような感じにしたい場合のJavaScriptは以下な感じ。

$(document).ready(function(){
  initDatePicker();
  $("input#dateFrom").change(function(){
    $("input#dateTo").datePicker(
        {startDate:document.form.dateFrom.value, endDate:""});
  });
});
function initDatePicker() {
  $.datePicker.setDateFormat('ymd', '-');
  $.datePicker.setLanguageStrings(
    ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
    ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    {p:'前月', n:'次月', c:'閉じる', b:'カレンダー表示'}
  );
}