Bootstrap Datepicker设置最小范围

时间:2017-10-18 03:55:20

标签: datepicker jquery-ui-datepicker bootstrap-datepicker bootstrap-daterangepicker

我们正在使用Bootstrap Datepicker(https://github.com/uxsolutions/bootstrap-datepicker)来设置签入和结帐日期。

我们需要能够在日期选择器上为最少入住的房产设置“最小范围”。

缺少要求:

  • 不允许夜晚的夜晚数量少于夜间物业。
  • 不允许结帐日期在入住日期之前。

因此,如果访客选择入住日期为12/01/2017,且酒店至少入住3晚,则不应允许访客选择12/02/2017,12/03/2017 。下一个可供他们结账的夜晚应该是2017年4月12日。

我没有看到这是一个使用此日期选择器的简单选项。我确实看到它已被添加为功能请求了不少。 https://github.com/uxsolutions/bootstrap-datepicker/issues/970

我已经使用disabledDates和setDatesDisabled日期构建了可以工作的开始。然而,我似乎无法弄清楚为什么这些disabledDates在选择新的开始日期时没有工作或开火。我认为我应该能够将新设置的禁用日期与已发布的日期相结合。

$(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']);]);

});

是否有其他日期选择器已经内置了?或者,是否有一种简单而干净的方法将上面缺少的要求添加到bootstrap datepicker?

Simple JSFiddle

1 个答案:

答案 0 :(得分:0)

试一试

qplot(x=Data$Weight, geom="histogram", main = "Weight distribution for Y Goods", binwidth = 0.5, xlab = "Weight of Y Goods", fill=I("blue"), col=I("red"), alpha=I(0.2), xlim=c(0,5))