jquery DatePicker 在特定日期

Question

我需要显示一个日期选择器，允许客户根据以下标准选择多个日期，并且还基于每天可以交付的订单数量的业务逻辑。

1. 仅显示 T + 5 天，其中 T 是当前日期，客户只能在 datepicker 中选择 5 个日期进行交货。其他日期将被停用
2. 没有星期日

3. 订单交付将有阈值限制。例如，如果特定日期的订单没有达到阈值限制，则应禁止选择该日期并显示下一个日期供客户选择交货。

   $(document).ready( function() {
       var threshold_orderlimit = 100; // limit for orders to accept
       var tdays = 5; // show today + 5 days
       var noOfOrdersPlaced = 40; // current order count 
       if(noOfOrdersPlaced >= threshold) {
           tdays = tdays +1; // next 5 days
       }
       $("#date").datepicker( {
           minDate: +tdays,
           maxDate: '+5D', // show only 5 days
           beforeShowDay: function(date) { // No sundays
               var day = date.getDay();
               return [(day != 0), ''];
           }
       });
   });
   

谁能帮我检查一下它是否可以在 Jquery 日期选择器中实现

Answer 1

如果使用 Jquery Datepicker，则无法选择多个日期。需要添加插件jQuery MultiDatePicker。

var date = new Date();
var threshold_reached_dates = [date.setDate(15), date.setDate(29),date.setDate(18)];
var today = new Date();
var maximumdays_limit = 5;
var pickable_range = 6;
$("#datepicker").multiDatesPicker({
    minDate:today,
    beforeShowDay : function(date){ return [date.getDay()!=0,'']},
    maxPicks : maximumdays_limit,
    pickableRange : pickable_range,
    adjustRangeToDisabled: true,
    addDisabledDates : threshold_reached_dates
});

function getSelectedDates()
{
    console.log($("#datepicker").multiDatesPicker("getDates"))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>

<div id="datepicker">
<button onclick="getSelectedDates()">Get Selected Dates</button>

如果使用 Bootstrap Datepicker

var startdate = new Date();
var enddate = new Date();
var threshold_reached_dates = ["2018-07-05","2018-07-25","2018-07-13","2018-07-17"];
var maximumdays_limit = 5;
enddate.setDate(startdate.getDate()+maximumdays_limit);
var l = threshold_reached_dates.filter(function(d){return new Date(d)>=startdate && new Date(d)<=enddate;}).length;
(l && enddate.setDate(enddate.getDate()+l));

$('#date').datepicker({
    format: "yy-mm-dd",
    startDate : startdate,
    endDate : enddate,
    daysOfWeekDisabled : '0',
    datesDisabled: threshold_reached_dates,
    multidate: true,
    multidateSeparator: ",",
}).on("changeDate",function(event){
      var dates = event.dates, elem=$('#date');
      if(dates.length>maximumdays_limit)
      {
          dates.pop();
          $("#date").datepicker("setDates",dates)
      }
});

function getDates()
{
    console.log($("#date").datepicker("getUTCDates"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<input type="text" id="date">
<button onclick="getDates()">Get Dates</button>