Question

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

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

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

$(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>

特定日期的jQuery DatePicker

1 个答案: