We Keep Coding

How to enable one day randomly per week in jQuery datepicker

Currently I am showing only next 60 days in datepicker. I am trying to enable only one day randomly per week. I do not know how to do it.
$( "#visit" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
maxDate:60
});
http://jsfiddle.net/4zb2frxt/2/

You can write custom function to disable all dates except one day in a week,
and code below
$(function(){
$("#visit").datepicker({
beforeShowDay: available,
minDate: 0,
maxDate:60
});
//get random value to select date
var random = Math.floor(Math.random() * 5) + 4;
//console.log(random);
function available(date) {
var day = date.getDay();
//disable weekends
if(day==6 || day==0) {
return [false,"","unAvailable"];
}
var dt = date.getDate();
if (dt % random ==0) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
});
<link rel="stylesheet" type="text/css" href="http://davidwalsh.name/dw-content/jquery-ui-css/custom-theme/jquery-ui-1.7.2.custom.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<input type='text' id='visit' />

JavaScript code returning NaN instead of numeric value

When I inputted the code below into jsfiddle it worked exactly as I wanted. However when I implemented it into my project the value returns as NaN.
<script type="text/javascript">
$(function () {
$('#datepicker8').datepicker({
showOnFocus: false,
showTrigger: '#calImg',
beforeShowDay: $.datepicker.noWeekends,
pickerClass: 'noPrevNext',
dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate');
$('#datepicker9').datepicker('option', 'minDate', min || '0');
datepicked();
}
});
$('#datepicker9').datepicker({
showOnFocus: false,
showTrigger: '#calImg',
beforeShowDay: $.datepicker.noWeekends,
pickerClass: 'noPrevNext',
dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true,
onSelect: function (dateStr) {
var max = $(this).datepicker('getDate');
$('#datepicker8').datepicker('option', 'maxDate', max || '+1Y');
datepicked();
}
});
});
var datepicked = function () {
var from = $('#datepicker8');
var to = $('#datepicker9');
var nights = $('#CalcDate1');
var startDate = from.datepicker('getDate');
startDate.setDate(startDate.getDate() + 1);
var endDate = to.datepicker('getDate')
// Validate input
if (endDate && startDate) {
// Calculate days between dates
var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
startDate.setHours(0, 0, 0, 1); // Start just after midnight
endDate.setHours(23, 59, 59, 999); // End just before midnight
var diff = endDate - (startDate + 1); // Milliseconds between datetime objects
var days = Math.ceil(diff / millisecondsPerDay);
// Subtract two weekend days for every week in between
var weeks = Math.floor(days / 7);
var days = days - (weeks * 2);
// Handle special cases
var startDay = startDate.getDay();
var endDay = endDate.getDay();
// Remove weekend not previously removed.
if (startDay - endDay > 1)
var days = days - 2;
// Remove start day if span starts on Sunday but ends before Saturday
if (startDay == 0 && endDay != 6)
var days = days - 1
// Remove end day if span ends on Saturday but starts after Sunday
if (endDay == 6 && startDay != 0)
var days = days - 1
nights.val(days);
}
}
</script>
I added the code below thinking that it would deal with NaN but it hasn't worked.
if (!isNaN(days)) {
document.getElementById('CalcDate1').value = days;
}
else {
document.getElementById('CalcDate1').value = "";
}
The jsfiddle link is JsFiddle

Its this line here:
var diff = endDate - (startDate + 1);
that is causing the issue. On your fiddle where its working
var diff = endDate - startDate;
This is causing the issue because endDate and startDate are objects and you are trying to concatenate an object with a number

Disable/Enable selected date range on jQuery datepicker UI

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
*/ }

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/