jquery DatePicker on specific date - datepicker

Question

I need to show a datepicker allowing customer to choose multiple dates based on below criteria and also based on business logic that number of Orders can delivery per day.
Show T + 5 days only where T is current date and customer can choose only 5dates in datepicker for delivery. Other dates will be de activated
No Sundays
There will be threshold limit for order delivery. If for example no of orders on specific date met the threshold limit, then that date should be disabled from choosing and show next date for customer to choose for delivery.
$(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), ''];
}
});
});
Can some one help me to check if it is achievable in Jquery Date Picker

Answer 1

In case of using the Jquery Datepicker, its not possible to select multiple dates. Need to add a plugin 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>
In case of using the 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>