Disable/Enable selected date range on jQuery datepicker UI - javascript

So I have the following demo http://dev.driz.co.uk/week.html that shows a jQuery UI datepicker that has multiple instances for each month of the year.
I've modified it so that the user selects entire weeks and then start and end dates for those weeks are stored on the right hand sidebar with a week number.
What I want to do is disable the dates once the user has selected them so they can see on the calender picker what dates have been selected (and also prevent them from adding the same date range more than once).
However I don't know where to start with this... I've created some enable and disable date functions but don't know how to actually disable the dates using the beforeShowDay method.
For example:
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('.week-picker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
But how would I disable a range of dates? As I only have the start and end dates. And can I call the beforeShowDay AFTER the datepicker is on the page like in my example? AND how can I then re-enable the dates?
Here's the code:
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
}, 1);
}
$('.week-picker').datepicker( {
defaultDate: '01/01/2014',
minDate: '01/01/2013',
maxDate: '01/01/2015',
changeMonth: false,
changeYear: true,
showWeek: true,
showOtherMonths: true,
selectOtherMonths: true,
numberOfMonths: 12,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
$('.remove').live('click', function(e){
enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));
$(this).parent('div').remove();
});
});
// adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){
$('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');
}
// disable the dates on the calendar
function disableDates(startDate, endDate){
}
// enable the dates on the calendar
function enableDates(startDate, endDate){
}
In short there are two questions here... How do I disable dates AFTER the datepicker is added to the page. And second how do I disable a range between two dates, as it looks like the beforeShowDay method expects an array of dates rather than a range.

But how would I disable a range of dates? As I only have the start and
end dates.
One way could be to create an array of dates based on the start and end dates that you have. Use that array in beforeShowDay to disable the range.
Demo: http://jsfiddle.net/abhitalks/FAt66/1/
For example, Relevant portions of JS:
var startDate = "2014-06-15", // some start date
endDate = "2014-06-21", // some end date
dateRange = []; // array to hold the range
// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}
// use this array
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
}
Now, you could set startDate and endDate whenever a date is selected. In the example fiddle I linked to above, the start and end dates are set whenever a date is selected in the two top inputs. The data array is populated when date is selected in the second input.
Note: The above example is additive, i.e. everytime you select a new range it gets added as disabled dates into the target. If you want to clear the existing disabled range before specifying a new range, then you could do a destroy and reattach the datepicker. (And also reset the dateRange array)
Demo 2: http://jsfiddle.net/abhitalks/FAt66/3/
Relevant portion of JS:
$("#dt").datepicker("destroy");
$("#dt").datepicker({
dateFormat : 'yy-mm-dd',
beforeShowDay: disableDates
});
var disableDates = function(dt) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
return [dateRange.indexOf(dateString) == -1];
}
Looking at your actual code, all you need is this:
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
for (var d = new Date(startDate);
d <= new Date(endDate);
d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('dd/mm/yyyy', d));
}
selectCurrentWeek();
},
beforeShowDay: disableDates,
...
This will keep adding the newly selected date ranges to the array and will additively keep on disabling. But, be cautioned that you will need an escape route when an already selected week is removed. In that case, you may work with multiple array which can be coalesced into one master array.

If there is a requirement to disable a list of dates or like if in any reservation kind of projects where we have to disable some dates throughout the process. So you can use following code,
$(function() {
//This array containes all the disabled array
datesToBeDisabled = ["2019-03-25", "2019-03-28"];
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
minDate : 0,
todayHighlight: 1,
beforeShowDay: function (date) {
var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [datesToBeDisabled.indexOf(dateStr) == -1];
},
});
});

I used all the solutions but not worked but i made change in common jquery.datepick.js
Exisiting _isSelectable constructor function
_isSelectable: function(elem, date, onDate, minDate, maxDate) {
var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
(!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
//This function is modified by Savata to Block fridays on homepage
return (dateInfo.selectable !== false) &&
(!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime());
}
Changed to
_isSelectable: function(elem, date, onDate, minDate, maxDate) {
var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
(!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
return (dateInfo.selectable !== false) &&
(!minDate || date.getTime() >= minDate.getTime()) &&
(!maxDate || date.getTime() <= maxDate.getTime()) && date.getDay() != 5;
/*Added last condition date.getDay() != 5 to block friday
In your case change accordingly
for sunday = 0 to saturday = 6
*/ }

Related

Jquery Datepicker - Autofill date based on first date without select

Below i have a 2 datepicker which user have to select them and then
the 2nd datepicker will change the min date according to datepicker1
but my goal is to set the 3rd date in datepicker1 and set 7th date in
datepicker 2 without selecting them(Auto).
So far i can able to display the first datepicker with last available
day(3rd date) while i still can't achieve the dates for 2nd
datepicker(7th) :(
Any suggestion?
Here's the code
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
$('#datepicker2').val('').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + date_diff + extra;
})
(7)
});
});
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100);
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
Note
The first datepicker min date is from tomorrow and maxdate is 3 days
which exclude holidays and sundays while the 2nd datepicker mindate is
based on 1st datepicker date and maxdate is 7 days which exclude
holidays and sundays. I just want the last 3rd and 7th date display in
the datepicker input without selecting them.Both input should not
available for choosing(Read-Only).
Updated: At first, I thought there was a bug with the answer code(I didn't really look at it) I provided you from the previous answer. But after looking through the old code again, I realized there isn't a bug with the old code since the datepicker class get remove every time the date picker object get initialize. Thus, I updated this answer to reflect that.
For this code, it is similar to the other code I gave you. It just that when it come to datepicker in a division it is different. However, I commented that into code. For the third datepicker, I compose that datepicker when the first maxDate function run for the first datepicker, then against when the second date picker function maxDate function is run. Since you don't want the user to do anything with the third datepicker, except seeing it, I used a division instead of an input field as a place holder for the third datepicker. They can still select the date but it will not do anything. You probably can add style to those dates to make it seem their selected and unselected states are the same. Also, tool tips can be added.
For this answer, I also give you two versions. The second version is better optimized and more flexible. Version 1 and 2 are the same code. Nonetheless, the second version assign the jQuery object of the 3 datepickers to 3 variables so that every time those divisions is needed to be used, it does not cause jQuery to look up those division objects again. Also, it is easier for you to change their naming context from one place.
Try to play around selecting the first day and you will see the days will dynamically change. Also, if you refer to any of my answer and find any bugs with in them, feel free to notify me of the bugs in the comment. Thank you.
Version 1:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
// Store date for datepicker3 here
var dp3 = [];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
function dp2ini () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem,
* removing its class is faster in this case.
*
* On the other hand if a datepicker widget is a part
* or a division, it has to be destroy as the html
* for the widget is placed as html content inside that division,
* and simply just removing the hasDatepicker class from that division
* will cause the reinitializer to write in a second datepicker widget.
*
* In a division where it only contained the picker
* object, it is faster to just set the HTML to blank
* and remove the hasDatepicker class. On the otherhand,
* for more complicated division, it is better to use,
* the destroy option from "datepicker".
*/
$('#datepicker2').val('').removeClass("hasDatepicker");
$('#datepicker2').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy");
$('#datepicker3').empty();
$('#datepicker3').removeClass("hasDatepicker");
$( "#datepicker3" ).datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
$('#datepicker1').datepicker({
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
$( "#datepicker3" ).datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
$( "#datepicker1" ).change(dp2ini);
// Also trigger the change event.
$( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
Version 2:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
var array = ["15-01-2020","18-01-2020"];
// Store date for datepicker3 here
var dp3 = [];
var datepicker1 = $('#datepicker1')
datepicker2 = $('#datepicker2'),
datepicker3 = $('#datepicker3');
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
function dp2ini () {
var from = datepicker1.datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem,
* removing its class is faster in this case.
*
* On the other hand if a datepicker widget is a part
* or a division, it has to be destroy as the html
* for the widget is placed as html content inside that division,
* and simply just removing the hasDatepicker class from that division
* will cause the reinitializer to write in a second datepicker widget.
*
* In a division where it only contained the picker
* object, it is faster to just set the HTML to blank
* and remove the hasDatepicker class. On the otherhand,
* for more complicated division, it is better to use,
* the destroy option from "datepicker".
*/
datepicker2.val('').removeClass("hasDatepicker");
datepicker2.datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = datepicker1.datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy");
datepicker3.empty();
datepicker3.removeClass("hasDatepicker");
datepicker3.datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
datepicker1.datepicker({
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
datepicker3.datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
datepicker1.change(dp2ini);
// Also trigger the change event.
datepicker1.datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>

Jquery datepicker reducing one day from selected epoch time

I have two Jquery datepickers namely "startDate" and "endDate". I initialize them like this.
$(function() {
$("#startdate").datepicker({ dateFormat: 'yy-mm-dd' });
$("#enddate").datepicker({ dateFormat: 'yy-mm-dd' });
});
Now i convert this date to epoch by doing this.
var sDate = startdate.split('-');
var eDate = enddate.split('-');
var sepoch = new Date(sDate[0], sDate[1] - 1, sDate[2]).getTime() / 1000;
var eepoch = new Date(eDate[0], eDate[1] - 1, eDate[2]).getTime() / 1000;
startdate = sepoch.toString();
enddate = eepoch.toString();
Now when i check the dates after converting them back from epoch, they differ by one day. So one day has been reduced from them. I can't figure out where i am going wrong. Please help me out here.
Please have a look at the fiddle, I have added a bit of code and I am getting the date that I chose from the datepicker
FIDDLE
$("#startdate").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
DoStuff();
}
});
function DoStuff() {
var startdate = $("#startdate").val();
var sDate = startdate.split('-');
var sepoch = new Date(sDate[0], sDate[1] - 1, sDate[2]).getTime() / 1000;
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
d.setUTCSeconds(sepoch);
console.log(sDate[2]);
console.log(d);
}

How do i restrict time to one hour in datetimepicker?

I have the following JavaScript code that uses of a StartDate & EndDate field.
What this code does is to restrict the dates on the EndDate field to the day you have chosen in the StartDate field.
What I am trying to do is to restrict time as well, for example the "datetimepicker" consists of a drop-down with Hours.
How do I restrict the EndDate field to one hour(according to the hour I have chosen from the StartDate field plus one) and maybe disable the rest of available hours?
$(document).ready(function () {
var dates = $('#StartDate, #EndDate').datetimepicker({
dateFormat: 'dd/mm/yy',
hourMin: 9,
hourMax: 17,
minDate: '1',
maxDate: null,
controlType: 'select',
timeFormat: 'hh:mm tt',
beforeShowDay: $.datepicker.noWeekends,
firstDay: 1,
changeFirstDay: false,
onSelect: function (selectedDate) {
var option = this.id == "StartDate" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datetimepicker._defaults.dateFormat,
selectedDate, instance.settings);
var edate;
var otherOption;
var d;
if (option == "minDate") {
otherOption = "maxDate";
d = date.getDate() + 0;
}
else if (option == "maxDate") {
otherOption = "minDate";
d = date.getDate() - 0;
}
var m = date.getMonth();
var y = date.getFullYear();
edate = new Date(y, m, d);
dates.not(this).datetimepicker("option", option, date);
dates.not(this).datetimepicker("option", otherOption, edate);
}
});
});
If you are using this plugin:
DateTimePicker
, then you can:
$('#rest_example_3').datetimepicker({
minDate: new Date(2010, 11, 20, 8, 30),
maxDate: new Date(2010, 11, 31, 17, 30)
});
Basically you need pass min date and end date with hours

javascript datapicker restrict dates

I have this code to restrict various "datepicker dates". :
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
})({
changeMonth: true,
changeYear: true
});
$(".datepicker").datepicker;
});
var calcDate = function() {
var start = $('#conference_date_in').datepicker('getDate');
var end = $('#conference_date_out').datepicker('getDate');
var days = (end - start) / 1000 / 60 / 60 / 24;
document.getElementById('total_days').value = days;
}
$('#conference_date_out').change(calcDate);
({ minDate: -20, maxDate: "+1M +10D" });
$('#conference_date_in').change(calcDate);
</script>
Is my min/max date in the wrong section?
You have to set mindate and max date like this
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
Example
Reference: mindate and maxdate
And if you want to disable a specific date range you can use the following code
// unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd
function unavailable(date) {
var startDate = new Date(dateRange[0]);
var endDate = new Date(dateRange[1]);
var day = date.getDay();
if(date > startDate && date < endDate )
return [false, "disabled"];
else if(day > 0 && day < 6)
return [true, "enabled"];
else
return [false, "disabled"];
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
Working Fiddle

Exclude beforeShowDay when determining minDate

I'm using beforeShowDay to exclude holidays and weekends, however I want the beforeShowDays to be excluded when calculating the minDate.
E.g. if the current day of the week is friday and the minDate is 2, I want the weekend to be excluded from the equation. So instead of monday being the first date you can select, I want it to be wednesday.
This is my jQuery:
$( "#date" ).datepicker({
minDate: 2, maxDate: "+12M", // Date range
beforeShowDay: nonWorkingDates
});
Does anyone know how to do this?
How about something like this:
function includeDate(date) {
return date.getDay() !== 6 && date.getDay() !== 0;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$("#date").datepicker({
beforeShowDay: function(date) {
return [includeDate(date)];
},
minDate: (function(min) {
var today = new Date();
var nextAvailable = getTomorrow(today);
var count = 0;
var newMin = 0; // Modified 'min' value
while(count < min) {
if (includeDate(nextAvailable)) {
count++;
}
newMin++; // Increase the new minimum
nextAvailable = getTomorrow(nextAvailable);
}
return newMin;
})(2) // Supply with the default minimum value.
});
Basically, figure out where the next valid date is, leveraging the method you've already defined for beforeShowDay. If my logic is correct (and you're only excluding weekends), this value can only be either 2 or 4: 2 If there are weekends in the way (Thurs. or Friday) and 2 if not.
It gets more complicated if you have other days you're excluding, but I think the logic still follows.
Here's the code on fiddle: http://jsfiddle.net/TpSLC/

Categories