jquery DatePicker on specific date

Question

我需要显示一个日期选择器，允许客户根据以下条件以及每天可以交付的订单数量的业务逻辑选择多个日期。

1. 仅显示 T + 5 天，其中 T 是当前日期，客户只能在日期选择器中选择 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日期选择器的情况下，不可能选择多个日期。需要添加一个插件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>

在使用引导日期选取器的情况下

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>