Zebra DatePickerで範囲指定 末日選択

Zebra DatePickerというカレンダーライブラリがある。

設置して

$(function(){
    $(".zebra").Zebra_DatePicker({
        format: 'Y-m-d',
        first_day_of_week: '0',
        days: ['日', '月', '火', '水', '木', '金', '土'],
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        show_select_today: '今日',
        lang_clear_date: '削除'
    });
});

こんな感じで指定してやれば日本風のカレンダーになる。

今回は、これに範囲指定が必要でハマったのでメモしておく。

from で指定された日付からtoで3ヶ月先の末日まで選択できる。※6月を選択すればその日から8月31日まで選択可能)
まず、3ヶ月先の末日を取得する関数を用意して

var toDoubleDigits = function(num) {
   num += "";
   if (num.length === 1) {
	    num = "0" + num;
   }
   return num;
};

function futuredays(){
  date= $("input[name=order_date]").val();
  var dt = new Date(date);
  dt.setMonth(dt.getMonth()+3);
  dt.setDate(0);
  var year=	toDoubleDigits(dt.getFullYear());
  var month=toDoubleDigits(dt.getMonth()+1);
  var day=		toDoubleDigits(dt.getDate());
  var termDay=year+"-"+month+"-"+day;
  return(termDay);
}
略
$("#from").Zebra_DatePicker({
    format: 'Y-m-d',
    first_day_of_week: '0',
    days: ['日', '月', '火', '水', '木', '金', '土'],
    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    show_select_today: '今日',
    lang_clear_date: '削除',
    pair:$("#to"),
    onSelect: function() {
        var datepicker = $("#to").data('Zebra_DatePicker');
        datepicker.update({
        	direction: [true,futuredays()],
        });
      }
});

$("#to").Zebra_DatePicker({
    format: 'Y-m-d',
    first_day_of_week: '0',
    days: ['日', '月', '火', '水', '木', '金', '土'],
    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    show_select_today: '今日',
    lang_clear_date: '削除',
    direction: [true,futuredays()],
});

ダブっている箇所があるがこれはなんとかならんのかな。。。。
ポイントになるのは、onSelectの部分とdatepicker.updateの部分。
datepicker.updateを指定することでfuturedays()が何度でも走ってくれる。

参考:
JavaScriptで日付や時間の0詰めを実装する
Zebra Datepicker公式 github

2 thoughts on “Zebra DatePickerで範囲指定 末日選択”

  1. こんにちは\(^^)/
    お久しぶりです。ゆくいです。覚えていらっしゃいますか(^_^;)

    mixiから超久しぶりのメールがきて、「ふぁるさんからメッセージがあります」とあったので開けてみたら、ふぁるさんからのメッセージなのに、ちょっと日本語の怪しい広告が書いてあったんです。
    それで、コレふぁるさんのID大丈夫かな!?と思って、余計なお世話かと思いつつも、一応お知らせしにお邪魔しました。
    ブログを拝見したら、ちょうど昨日の日付で更新されてたので、こちらの連絡で大丈夫かなあと…(^_^;)

    わたしの方は、今はSNSをやる暇もないほど毎日忙しく、でも楽しく過ごしています。
    ふぁるさんの近況など、ゆっくりお聞きしたいけど、聞いても難しくて理解できなそうな気もします( ´∀`)
    また機会があれば、色々聞かせてください。
    これからもどうぞお元気でご活躍くださいね\(^^)/
    ずっと応援しています。

    1. おおおお お久しぶりです!!
      ブログみないので気づかなかったです。
      元気にしてますよー。

      えーー、そんなメールが来てたんですね。ちょっと確認しなきゃ。
      僕の方も、結構仕事がバタバタです。
      そういえば、コミケに通ったのですがまだ作品とかどうするか考えてなくてそれもなんとかしなければならないですw
      また、お話できるといいですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください