jQuery DatePicker在特定日期

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 Date Picker中是否可以实现

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>