Good afternoon. In my project, I need to display a calendar for a year. I did it with datepicker. Now I need to make it so that I can select the year of this calendar from another page. Please tell me how to do this? (A year comes to the page with a request)
function drawDatepicker(){
$('#picker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
numberOfMonths: [3,4],
stepMonths: 0,
yearRange: chouseYear + ":" + chouseYear,
showCurrentAtPos: new Date().getMonth(),
onSelect: function (dateText, datePicker) {
datePicker.drawMonth += $("#picker").datepicker("option", "showCurrentAtPos");
var radVal = $('input[name="typeDay"]:checked').val();
if(radVal == 1){
addOrRemoveDate(dateText, day_off);
}
if(radVal == 2){
addOrRemoveDate(dateText, radonica);
}
console.log(day_off);
console.log(radonica);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = padNumber(date.getMonth() + 1);
var day = padNumber(date.getDate());
var dateString = day + "." + month + "." + year;
var gotDate1 = jQuery.inArray(dateString, day_off);
if (gotDate1 >= 0) {
return [true, "ui-state-highlight"];
}
var gotDate2 = jQuery.inArray(dateString, radonica);
if (gotDate2>=0){
return [true, "ui-widget-header"];
}
return [true, ""];
}
});
}
Screen calendar
I found this solution to the problem. I specified defaultDate 01.01 of the desired year and showCurrentAtPos to 0. If the current year is specified, then defaultDate is today, and showCurrentAtPos is the number of the month
defaultDate: defaultDate,
showCurrentAtPos: sCAPos,
I'm using the code from JQuery UI Datepicker Disbale Next Day After 12pm to disable weekends, public holidays and next day (if selected after 10am), but I'm stuck on how to only allow Tuesday, Wednesday and Thursday to be selected.
// dates
var dateMin = new Date();
var weekDays = AddWeekDays(1);
dateMin.setDate(dateMin.getDate() + weekDays);
var natDays = [
[1, 1, 'uk'],
[12, 25, 'uk'],
[12, 26, 'uk']
];
function noWeekendsOrHolidays(date) {
var noWeekend = $j.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
function AddWeekDays(weekDaysToAdd) {
var mydate = new Date();
if (mydate.getHours()>=10)
var daysToAdd = 1;
else var daysToAdd = 0;
var day = mydate.getDay()
weekDaysToAdd = weekDaysToAdd - (5 - day)
if ((5 - day) < weekDaysToAdd || weekDaysToAdd == 1) {
daysToAdd = (5 - day) + 2 + daysToAdd
} else { // (5-day) >= weekDaysToAdd
daysToAdd = (5 - day) + daysToAdd
}
while (weekDaysToAdd != 0) {
var week = weekDaysToAdd - 5
if (week > 0) {
daysToAdd = 7 + daysToAdd
weekDaysToAdd = weekDaysToAdd - 5
} else { // week < 0
daysToAdd = (5 + week) + daysToAdd
weekDaysToAdd = weekDaysToAdd - (5 + week)
}
}
return daysToAdd;
}
$j('.input-text.addon.addon-custom').datepicker({
beforeShowDay: noWeekendsOrHolidays,
minDate : dateMin,
defaultDate: +1,
firstDay: 1,
changeFirstDay: true,
dateFormat: "DD, dd MM yy"
});
Any help would be very much appreciated.
Fiddle here: http://jsfiddle.net/prydonian/4k4gga6j/
On your datepicker function, add the "beforeShowDay" option like this.
jQuery('#datepicker').datepicker({
minDate: dateMin,
defaultDate: +1,
firstDay: 1,
changeFirstDay: true,
dateFormat: "DD, dd MM yy",
beforeShowDay: function(day){
if (day.getDay()<2 || day.getDay()>4){
return [false, ""];
}
return noWeekendsOrHolidays(day);
}
});
here is the Fiddle updated: http://jsfiddle.net/4k4gga6j/3/
If I understood you right, you need to exclude any day other than Tuesday, Wednesday and Thursday? If the answer is yes, then you should add the following code to your existing noWeekendsOrHolidays method:
($.inArray(date.getDay(), [2, 3, 4]) != -1)
here is updated jsFiddle http://jsfiddle.net/4k4gga6j/4/
I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?
There is the beforeShowDay option, which takes a function to be called for each date, returning true if the date is allowed or false if it is not. From the docs:
beforeShowDay
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and 1 equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.
Display some national holidays in the datepicker.
$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [
[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
[4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
[7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
[10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
One built in function exists, called noWeekends, that prevents the selection of weekend days.
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
To combine the two, you could do something like (assuming the nationalDays function from above):
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
Update: Note that as of jQuery UI 1.8.19, the beforeShowDay option also accepts an optional third paremeter, a popup tooltip
If you don't want the weekends to appear at all, simply:
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
The datepicker has this functionality built in!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/#utility-noWeekends
These answers were very helpful. Thank you.
My contribution below adds an array where multiple days can return false (we're closed every Tuesday, Wednesday and Thursday). And I bundled the specific dates plus years and the no-weekends functions.
If you want weekends off, add [Saturday], [Sunday] to the closedDays array.
$(document).ready(function(){
$("#datepicker").datepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 1,
minDate: '05/01/09',
maxDate: '+2M',
firstDay: 1
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Monday], [Tuesday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
The solution here that everyone likes seems to very intense... personally I think it's much easier to do something like this:
var holidays = ["12/24/2012", "12/25/2012", "1/1/2013",
"5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013",
"11/29/2013", "12/24/2013", "12/25/2013"];
$( "#requestShipDate" ).datepicker({
beforeShowDay: function(date){
show = true;
if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
}
var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
return display;
}
});
This way your dates are human readable. It's not really that different it just makes more sense to me this way.
You can use noWeekends function to disable the weekend selection
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
This version of code will make u to get the holiday dates from the sql database and disable the specified date in the UI Datepicker
$(document).ready(function (){
var holiDays = (function () {
var val = null;
$.ajax({
'async': false,
'global': false,
'url': 'getdate.php',
'success': function (data) {
val = data;
}
});
return val;
})();
var natDays = holiDays.split('');
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (var i = 0; i ‘ natDays.length-1; i++) {
var myDate = new Date(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#shipdate").datepicker({
minDate: 0,
dateFormat: 'DD, d MM, yy',
beforeShowDay: noWeekendsOrHolidays,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
});
});
Create a Database in sql and put you holiday dates in MM/DD/YYYY format as Varchar
Put the below contents in a file getdate.php
[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]
Happy Coding !!!! :-)
$("#selector").datepicker({ beforeShowDay: highlightDays });
...
var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (date - dates[i] == 0) {
return [true,'', 'TOOLTIP'];
}
}
return [false];
}
In this version, month, day, and year determines which days to block on the calendar.
$(document).ready(function (){
var d = new Date();
var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$(".datepicker").datepicker({
minDate: new Date(d.getFullYear(), 1 - 1, 1),
maxDate: new Date(d.getFullYear()+1, 11, 31),
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
In the latest Bootstrap 3 version (bootstrap-datepicker.js) beforeShowDay expects a result in this format:
{ enabled: false, classes: "class-name", tooltip: "Holiday!" }
Alternatively, if you don't care about the CSS and tooltip then simply return a boolean false to make the date unselectable.
Also, there is no $.datepicker.noWeekends, so you need to do something along the lines of this:
var HOLIDAYS = { // Ontario, Canada holidays
2017: {
1: { 1: "New Year's Day"},
2: { 20: "Family Day" },
4: { 17: "Easter Monday" },
5: { 22: "Victoria Day" },
7: { 1: "Canada Day" },
8: { 7: "Civic Holiday" },
9: { 4: "Labour Day" },
10: { 9: "Thanksgiving" },
12: { 25: "Christmas", 26: "Boxing Day"}
}
};
function filterNonWorkingDays(date) {
// Is it a weekend?
if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
return { enabled: false, classes: "weekend" };
// Is it a holiday?
var h = HOLIDAYS;
$.each(
[ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ],
function (i, x) {
h = h[x];
if (typeof h === "undefined")
return false;
}
);
if (h)
return { enabled: false, classes: "holiday", tooltip: h };
// It's a regular work day.
return { enabled: true };
}
$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
This work for me:
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
For Saturday and Sunday You can do something like this
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});
To Disable the Weekends the API has a built-in feature
$('#data_1 .input-group.date').datepicker({
daysOfWeekDisabled: [0,6],
});
0 = Sunday
6 = Sunday
Thank you so much for taking the time to read. I have a calendar that allows booking and selecting dates, but I need to disable specific weekdays, months, but also third friday or second tuesday for certain trips. So I have this functions that #Thierry J. helped me to clean up, but i need to join it to the last function (activate only third friday, or second tuesday, and so on).
var daysToDisable = [1, 4, 6];
var monthsToDisable = [9];
function disableSpecificWeekDays(date) {
var day = date.getDay();
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
var month = date.getMonth();
if ($.inArray(month, monthsToDisable) != -1) {
return [false];
}
return [true];
}
To activate only third friday for the selected months I have this function:
var day = date.getDay();
var date = date.getDate();
return [(day == 5 && date >= 15 && date <= 21), ''];
So I was wondering if is possible to have all those functions together for beforeShowDay, but with the ability to select the trips that will have those restrictions. The "days to disable", and "months to disable" functions are ready and work with this variables:
var daysToDisable = [1, 4, 6];
var monthsToDisable = [9];
And i'll like to have the possibility to disable in the same way the specific week days:
var specificdaysToDisable = []
Also if there is a much better possibility to code it, so i'll be able to deactivate third friday for one trip, second tuesday for a different one, then i'm open to suggestions.
Thank you in advance!
To know if is the third week instead of check the day is not between 14 and 22, you can write your own Date.prototype.getWeekOfMonth function to get the week number of the month and than use it to check the condition.
Code:
Date.prototype.getWeekOfMonth = function(exact) {
var month = this.getMonth()
, year = this.getFullYear()
, firstWeekday = new Date(year, month, 1).getDay()
, lastDateOfMonth = new Date(year, month + 1, 0).getDate()
, offsetDate = this.getDate() + firstWeekday - 1
, index = 1 // start index at 0 or 1, your choice
, weeksInMonth = index + Math.ceil((lastDateOfMonth + firstWeekday - 7) / 7)
, week = index + Math.floor(offsetDate / 7)
;
if (exact || week < 2 + index) return week;
return week === weeksInMonth ? index + (weeksInMonth -1 ) : week;
};
jQuery("#datepicker").datepicker({
beforeShowDay: disableSpecificWeekDaysandMonths,
});
var daysToDisable = [0, 2, 3, 4, 6];
var monthsToDisable = [1, 2];
var specificDaysToDisable = [5];
function disableSpecificWeekDaysandMonths(date) {
var day = date.getDay();
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
var month = date.getMonth();
if ($.inArray(month, monthsToDisable) != -1) {
return [false];
}
var date2 = date.getDate();
var inArray = $.inArray(day, specificDaysToDisable)
if (inArray != -1 && date.getWeekOfMonth()!=3) {
return [false];
}
return [true]
}
Demo: http://jsfiddle.net/IrvinDominin/yFtLP/11/
I consider this will be the final code, but also I'm open to suggestions as I'm not sure if it's syntax is correct or if there could be other ways to improve the code.
Also in Fiddle and with short version with inArray var.
jQuery("#datepicker").datepicker({
beforeShowDay: disableSpecificWeekDaysandMonths,
});
var daysToDisable = [0, 2, 3, 4, 6];
var monthsToDisable = [1, 2 ];
var specificDaysToDisable = [5];
function disableSpecificWeekDaysandMonths(date) {
var day = date.getDay();
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
var month = date.getMonth();
if ($.inArray(month, monthsToDisable) != -1) {
return [false];
}
var date2 = date.getDate();
if ($.inArray(day, specificDaysToDisable) != -1 && date2 <= 14 || $.inArray(day, specificDaysToDisable) != -1 && date2 >= 22 ) {
return [false];
}
return [true]
}
So my question is pretty simple. I'd like to have specific dates that are enabled on a datepicker, like this http://tokenposts.blogspot.fr/2011/05/jquery-datepicker-disable-specific.html but I only want the last day of any month, for example 30/06/2012, 31/07/2012, ...
Any clue ?
This is how you can do it...
Getting the last day for a given year and month:
function getLastDayOfYearAndMonth(year, month)
{
return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();
}
Check with beforeShowDay event if date is the last month day:
$('.selector').datepicker(
{
beforeShowDay: function(date)
{
// getDate() returns the day [ 0 to 31 ]
if (date.getDate() ==
getLastDayOfYearAndMonth(date.getFullYear(), date.getMonth()))
{
return [true, ''];
}
return [false, ''];
}
});