読者です 読者をやめる 読者になる 読者になる

ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

datepickerの期間設定をいい感じに実装する方法

bootstrap jQuery

f:id:jun9632:20160302160105p:plain

BootStrapのDatepickerを使って期間を指定するときに

Datepicker for Bootstrap

github.com

いい感じに期間を調整するには、こんな感じがいいんじゃないかと思ってコードを書いてみました。

いい感じとは?

ニュアンス的な表現いい感じを具体的に書くと

  • 開始日付を設定したときに、終了日付が未入力だったら終了日付を設定する。(今回は仮に3日後に設定しています。)
  • 終了日付を設定したときに、開始日付が未入力だったら開始日付を設定する。(今回は仮に3日前に設定しています。)
  • 開始日付を変更して 開始日付 > 終了日付となった場合に、終了日付を3日後に設定変更する。
  • 終了日付を変更して 開始日付 > 終了日付となった場合に、開始日付を3日前に設定変更する。
  • 開始日付を入力すると、それより前の日付をdisableにする方法があるようだがそれはやらない。終了日に関してもやらない。

私の考えるいい感じのdatepickerの期間設定です。

コード

htmlとjsはそれぞれ、以下の様になります。

html

 <input type="text" id="start_date" placeholder="2016/12/31" />
 <input type="text" id="end_date" placeholder="2017/01/03" />

js

$(function(){
    $('#start_date').datepicker({
        language: "ja",
        autoclose: true
    }).on('changeDate', function(e){
        if ($('#end_date').datepicker('getDate') == null || e.date.valueOf() > $('#end_date').datepicker('getDate').valueOf()) {
            var nextDate = new Date(e.date);
            nextDate.setDate(new Date(e.date).getDate() + 3);
            $('#end_date').datepicker('setDate', nextDate);
        }
    });
    $('#end_date').datepicker({
        language: "ja",
        autoclose: true
    }).on('changeDate', function(e){
        if ($('#start_date').datepicker('getDate') == null || $('#start_date').datepicker('getDate').valueOf() > e.date.valueOf()) {
            var previousDay = new Date(e.date);
            previousDay.setDate(new Date(e.date).getDate() - 3);
            $('#start_date').datepicker('setDate', previousDay);
        }
    });
});

補足

日付を取得する際に、datepicker('getDate') を使っています。

$('#start_date').datepicker('getDate')

個人的に、この書き方にたどり着くのに時間がかかってしまいました。

$('#start_date').datepicker().getDate()

みたいに書いていて値が取得できずハマりました。 大丈夫かとは思いますが、ご注意ください。

関連記事

marketing-web.hatenablog.com

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)