0

チェックインとチェックアウトの日付を設定するために、ブートストラップのDatepicker(https://github.com/uxsolutions/bootstrap-datepicker)を使用しています。ブートストラップ日付ピッカーの設定最小範囲

最小滞在日数を持つプロパティの日付ピッカーで「最小範囲」を設定できるようにする必要があります。

欠落要件:

  • は夜の#は財産夜間の最小値よりも小さいことがないようにしてください。
  • チェックイン日をチェックイン日の前にすることはできません。

したがって、訪問者が12/01/2017のチェックイン日を選択し、その宿泊施設に最低3泊の宿泊がある場合、訪問者は12/02/2017、12/03/2017チェックアウトのために利用可能な次の夜は12/04/2017です。

これは、この日付ピッカーの簡単なオプションではありません。私はそれが機能リクエストとしてかなり追加されているのを見ています。 https://github.com/uxsolutions/bootstrap-datepicker/issues/970

私は、disabledDatesとsetDatesDisabledの日付を使用することで、動作する可能性のあるものを構築しました。しかし、なぜ私はこれらの身体障害者が新しい開始日を選択するときに働いていないか発砲していないのか理解できないようです。私は、新しく設定された無効日とすでに掲示されている日を組み合わせることができるはずだと思います。

$(function($) { 

    var today = new Date(); 
    $('.input-daterange').datepicker({ 
     daysOfWeekHighlighted: "0,6", 
     autoclose: true, 
     todayHighlight: true, 
     startDate: today, 
     datesDisabled: ['10/1/2017','10/2/2017','10/3/2017','10/4/2017','10/5/2017','10/6/2017','10/7/2017','10/8/2017','10/9/2017','10/10/2017','10/11/2017','10/12/2017','10/13/2017','10/14/2017','10/15/2017','10/16/2017','10/17/2017','10/18/2017','10/19/2017','10/20/2017','10/21/2017','10/22/2017','10/23/2017','10/24/2017','10/25/2017','10/26/2017','10/27/2017','10/28/2017','10/29/2017','10/30/2017','10/31/2017'], 
    }); 

}); 

// Set end date to minimum nights. 
$('#start').on('change', function() { 

    // Set minNights. 
    minNights = 3; 

    start = $('#start').datepicker('getDate'); 
    end = moment(start).add(minNights, 'day').toDate(); 
    $('#end').datepicker('update', end); 

    $('.input-daterange').datepicker('setDatesDisabled', [ $('.input-daterange').datepicker('setDatesDisabled', ['12/02/2017', '12/03/2017']);]); 

}); 

これは既に組み込まれている別の日付ピッカーですか?あるいは、上記の不足している要件をブートストラップのdatepickerに追加するシンプルでクリーンな方法はありますか?

シンプルJSFiddle

答えて

0

これは試してみてください

$(function() { 
    $('#datepicker').datepicker({ 
     dateFormat: 'yy-mm-dd', 
     showButtonPanel: true, 
     changeMonth: true, 
     changeYear: true, 
yearRange: '1999:2012', 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true, 
     minDate: new Date(1999, 10 - 1, 25), 
     maxDate: '+30Y', 
     inline: true 
    }); 
}); 
関連する問題