时间戳

首页 > 解决方案 > jquery DatePicker 在特定日期

datepicker - jquery DatePicker 在特定日期

问题描述

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

  1. 仅在 T 是当前日期的情况下显示 T + 5 天，并且客户只能在 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 Date Picker 中实现

标签： datepickerjquery-ui-datepicker

解决方案

如果使用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>

推荐阅读