We Keep Coding

Multiple checks in beforeShowDay - jQueryUI datepicker

In short, I want the datepicker to first disable all sundays - I use this code:
jQuery("#datepicker").datepicker({
beforeShowDay: function(day) {
var day = day.getDay();
if (day == 0) {
return [false, "busy"]
} else {
return [true, "free"]
}
}
});
It works. But then I also want to disable specific dates within a range that is stored in an array:
jQuery("#datepicker").datepicker({
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
}
});
This also works and disables the days that I want.
Problem: Both codes works seperately - how can I combine them so both sundays are disabled and my custom dates from the array?

Hope this will help you. Try following code:
$(function(){
$('#thedate').datepicker({
beforeShowDay: function(date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
var day = date.getDay();
if (day == 0 || dateRange.indexOf(dateString) != -1) {
return [false, "busy"]
} else {
return [true, "free"]
}
}
});
});
Here is working jsfiddle.

How to Disable the very next weekends in jQuery UI Datepicker?

In an order page I want to implement a calendar, in which, if the user is ordering on friday after 10am, then block the following saturday and sunday in delivery date calendar. Here is a sample code I am trying, but not working as intended.
beforeShowDay: function(date) {
var day = dt.getDay();
var hour = dt.getHours();
if (day == 4) {
// i think, here i want to put the code to disable days
}
}
If I use something like this
beforeShowDay: function(date) {
var day = date.getDay();
var dt = new Date();
var hour = dt.getHours();
return [(day != 5 && day != 6)];
}
I am able to disable Sat and Sun days, but this will disable all the Sat and Sun days. I wnat to disable only the very next Sat n Sun days to be disabled. Also I can get current Hour in var hour, So where should I use the condition to check if the hour is greater than 10am, I am using something like this but not working
beforeShowDay: function(date) {
var dt = new Date();
var hour = dt.getHours();
var day = date.getDay();
if (day == 4 && hour >= 10) {
return [(day != 5 && day != 6)];
}
}

Inside the beforeShowDay function, check the current date to see if it is a Friday and after 10am. If this is true then you also need to check if the date passed as argument is the next Saturday or Sunday:
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
// date (Friday March 13 2015 10:00 AM) is hardcoded for testing
var now = new Date(2015, 3 - 1, 13, 10, 0, 0, 0);
if (now.getDay() === 5 && now.getHours() >= 10) {
var now_plus_1 = new Date(now.getTime()); now_plus_1.setHours(0, 0, 0, 0); now_plus_1.setDate(now_plus_1.getDate() + 1);
var now_plus_2 = new Date(now.getTime()); now_plus_2.setHours(0, 0, 0, 0); now_plus_2.setDate(now_plus_2.getDate() + 2);
return [date.getTime() !== now_plus_1.getTime() && date.getTime() !== now_plus_2.getTime(), ""];
}
return [true, ""];
}
});
});
#import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-darkness/jquery-ui.min.css");
body { font-size: smaller; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input id="datepicker">

$('#datepicker').datepicker({
beforeShowDay: function(date){
var dt = new Date(),
day = dt.getDay(),
hour = dt.getHours(),
twoDaysFrmNow = new Date().setDate(dt.getDate() + 2);
return [!(day == 5 && hour >= 10 && date <= twoDaysFrmNow && date > dt)];
}
});

beforeShowDayType: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array
with:
[0]: true/false indicating whether or not this date is selectable [1]:
a CSS class name to add to the date's cell or "" for the default
presentation [2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is
displayed.
beforeShowDay: function(date) {
var day = dt.getDay();
var hour = dt.getHours();
if( day == 4) {
// this is an example of how to use
//first parameter is disable or not this date
//second parameter is the class you want to add ( jquery will remove the click listener, but you probebly want to style it like this date is not available
//third optional tootltip like 'closed on weekends'
return [false,'disabled','weekend']
}
}

how to disable specific days in JQuery datepicker?

I want to disable all the Sunday,Monday and Wednesday from my jquery date-picker. I am trying to do this using the following code sample -
jQuery(document).ready(function($) {
$(".datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1), ''];
}
})
});
This code disable all Mondays from the calender. How can i disable all Sunday and Wednesdays too?

try this code
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
});

$(".datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1 && day != 3 && day != 0), ''];
}
});
The days of week go as 0 - Sunday, 1 - Monday and so on.
So day != DayNumber will solve it for you.
Fiddle

jQuery date picker How to enable even week sundays only

Using this code i can enable only sundays. but how to disable sundays, if it is even week of the year.
function settings(date) {
if (date.getDay() == 0) {
return [true, "", "Works"];
} else {
return [false, "", ""];
}
}
$i("#searchsectionbarids").datepicker({
altField: "#alternate",
altFormat: "DD",
dateFormat: 'dd/mm/yy',
beforeShowDay: settings
});

use this to get the week number of the year:
Date.prototype.getWeek = function () {
var firstDay = new Date(this.getFullYear(), 0, 1);
var today = new Date(this.getFullYear(), this.getMonth(), this.getDate());
var dayOfYear = ((today - firstDay + 1) / 86400000);
return Math.ceil(dayOfYear / 7)
};
and then
function settings(date) {
if (date.getDay() == 0 && date.getWeek() % 2 == 1) {
return [true, "", "Works"];
} else {
return [false, "", ""];
}
}

Firstly, you must check the week is even or not
You can reference at
Get week of year in JavaScript like in PHP
Then you use your logic to setting your calendar
Good luck

jquery datepicker allow a specific text to be entered or selected

I want either the user can select a particular date or it can be filled up with say 'xyz'. I have tried using constrainInput = false but that allow user to enter anything. I only want the user can write or select only 'xyz'.

You can test the date input value:
$('#datepicker').datepicker({
constrainInput: false,
dateFormat: "dd/mm/yy"
}).on("change", function () {
// Accepts xyz as the value
if ($(this).val() == "xyz")
return true;
// Accepts just valid dates as the value
var comp = $(this).val().split('/');
var m = parseInt(comp[0], 10);
var d = parseInt(comp[1], 10);
var y = parseInt(comp[2], 10);
var date = new Date(y,m-1,d);
if (date.getFullYear() == y && date.getMonth() + 1 == m && date.getDate() == d)
return true;
alert("Wrong");
});
Test: http://jsfiddle.net/sFBn2/9/

If you want to select only one day, why not disable the input on the field and use only the datepicker with the day selection limited only to it?
Fot the disabled field use the attribute readonly of the input, for the datepicker day limitation use the beforeShowDay function.
HTML:
<input type='text' id='foo' readonly='true'>
jQuery:
$('#foo').datepicker({
constrainInput: false,
dateFormat: "dd/mm/yy",
beforeShowDay: function (date) {
var today=new Date();
if (date.getDate() == today.getDate()) {
return [true, ''];
}
return [false, ''];
}
});
Demo: http://jsfiddle.net/IrvinDominin/qdBkZ/