jquery DatePicker на конкретную дату - PullRequest
Новая
       14

jquery DatePicker на конкретную дату

0 голосов
/ 02 июля 2018

Мне нужно показать средство выбора даты, позволяющее клиенту выбирать несколько дат на основе приведенных ниже критериев, а также на основе бизнес-логики, согласно которой количество заказов может доставляться в день.

  1. Показывать только T + 5 дней, где T - текущая дата, и клиент может выбрать только 5 дат в DatePicker для доставки. Другие даты будут деактивированы
  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

1 Ответ

0 голосов
/ 02 июля 2018

В случае использования 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>
...