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']
}
}
Related
I am using kendodatepicker in HTML form for selecting dates.
I want to make all dates of every month disabled and only show the 2nd and 4th weeks Thursday only to be selectable (means the user can select only 2days in a month that is Thursday).
How can I achieve that using kendodatepicker,
I searched a lot on the internet but did not find something useful.
currently, I am using the function for this as:--
$("#datepicker").kendoDatePicker({
format: "dd/MM/yyyy",
min: yesterday,
disableDates: ["mo","tu","we","sa","su","fr",],
});
One of the overloads of the disabledDates method is to accept a function. What you can do is:
Check if the date is a thursday
Check if the date falls on the second or fourth week of the month
If both one and two are true, then return false
Here is a nifty function that gets the week of the month for a given date to help with number 2: https://stackoverflow.com/a/36036273/1920035
Here is an example:
const getWeekOfMonth = (date) => {
var firstWeekday = new Date(date.getFullYear(), date.getMonth(), 1).getDay() - 1;
if (firstWeekday < 0) {
firstWeekday = 6;
}
var offsetDate = date.getDate() + firstWeekday - 1;
return Math.floor(offsetDate / 7);
};
$("#datepicker").kendoDatePicker({
value: new Date(),
disableDates: (date) => {
date = new Date(date);
const dayOfWeek = date.getDay();
const weekOfMonth = getWeekOfMonth(date);
return !(dayOfWeek === 4 && (weekOfMonth === 1 || weekOfMonth === 3));
}
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
<input id="datepicker" />
I'm trying to set time using variables using jquery datetimepicker. So the problem is the following: in my logic i've datetimepicker that can select date and time. When the user click on form field and select date only, the plugin set selected date and current time. But we have different time available set by code (for example: monday 9:00 to 12:00 (step 1 hour), tuesday 8:00 to 11:00).
So the picker doesn't have to set the current time but the first time available, for example 9:00 for monday.
When i select date only, it set also the time (but is wrong because in this case we have only 9:00 in the morning), so the result should be: 2022/04/01 09:00
How can i set it up?
Below some code example:
Datetimepicker(jquery):
/**
* #param currentDateTime {Date}
*/
const allowTimeOnSelectedDay = function (currentDateTime) {
if (currentDateTime != null) {
var currentDay = currentDateTime.getDay();
const map1 = data.week.map(el => {
if (el.day == currentDay) {
let allowedTimes = generateAllowedTime(el.startingMattina, el.closingMattina, el.startingPome, el.closingPome);
console.log(allowedTimes);
console.log(allowedTimes[0]);
this.setOptions({
allowTimes: allowedTimes
});
}
});
}
};
$('#datetimepicker11').datetimepicker({
dayOfWeekStart: 1,
formatDate: 'd/m/Y H:i',
minDate: dateToStart,
maxDate: new Date(Date.parse(data.endDate)),
startDate: dateToStart,
beforeShowDay: function (date) {
for (let i = 0; i < arr.length; i++) {
if (date.getMonth() == arr[i].getMonth() && date.getDate() == arr[i].getDate()) {
return [false, ""]
}
}
return [true, ""];
},
onChangeDateTime: allowTimeOnSelectedDay,
onShow: allowTimeOnSelectedDay,
//onSelectDate : formattedDateOnSelectedDateOnly,
});
I want to disable the 2nd Saturday, 4th Saturday, Sunday and public holidays, throughout the year, using jQuery Calendar.
Jquery Calendar plugin provide you a option "beforeShowDay", you can
find more information on DataPickerUI
To Disable 2nd Saturday & 4th Saturday, you need to first calculate the sat or sunday of specific month then disable those dates, like we did for others calendars
sample code calculate sat & sunday https://www.hscripts.com/scripts/JavaScript/second-fourth.php
Created plunker for you,
https://plnkr.co/edit/inBYY748BptaCd7Ulwwg?p=preview
//To disable Sundays you need to find out the Day of current date.
$(function () {
var publicHolidays = [
[11, 28, 2015],
[11, 30, 2015]
];
$("#datepicker").datepicker({
beforeShowDay: function (date) {
var day = date.getDay();
return [(day !== 0), ''];
}
});
//To disable public holidays create an array with you holiday list then
//return false when you browse calender.
$("#datepicker2").datepicker({
beforeShowDay: function (date) {
for (i = 0; i < publicHolidays.length; i++) {
if (date.getMonth() == publicHolidays[i][0] &&
date.getDate() == publicHolidays[i][1] &&
date.getFullYear() == publicHolidays[i][2]) {
return [false];
}
}
return [true];
}
});
});
For what it's worth, here's a couple of functions for the second/fourth Saturday part of the problem.
Both functions accept an instance of javascript Date() and return true or false. You can use either one.
function is2ndOr4thSat_1(date) {
var day = date.getDay(),
week = Math.floor(date.getDate() / 7);
return day == 6 && (week == 1 || week == 3)
}
Hopefully is2ndOr4thSat_1() is self explanatory.
function is2ndOr4thSat_2(date) {
var d = date.getDate(),
offset = (((1 + date.getDay() - d) % 7) + 7) % 7;
return !((offset + d) % 14);
}
is2ndOr4thSat_2() is more obscure.
The expression (((1 + date.getDay() - d) % 7) + 7) % 7 finds the offset of the first of the month from a nominal zero (the 1st's preceding Saturday), using a true modulo algorithm that caters for negative numbers.
Then (offset + d) % 14 returns 0 if date is either 14 or 28 days ahead of the nominal zero, and ! converts to a boolean of the required sense (true for qualifying Saturdays otherwise false).
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/
given a date object,how to get previous week's first day
This Datejs library looks like it can do that sort of thing relatively easily.
Code:
function getPreviousSunday()
{
var today=new Date();
return new Date().setDate(today.getDate()-today.getDay()-7);
}
function getPreviousMonday()
{
var today=new Date();
if(today.getDay() != 0)
return new Date().setDate(today.getDate()-7-6);
else
return new Date().setDate(today.getDate()-today.getDay()-6);
}
Reasoning:
Depends what you mean by previous week's first day. I'll assume you mean previous sunday for the sake of this discussion.
To find the number of days to subtract:
Get the current day of the week.
If the current day of the week is Sunday you subtract 7 days
If the current day is Monday you subtract 8 days
...
If the current day is Saturday 13 days
The actual code once you determine the number of days to subtract is easy:
var previous_first_day_of_week=new Date().setDate(today.getDate()-X);
Where X is the above discussed value. This value is today.getDay() + 7
If by first day of the week you meant something else, you should be able to deduce the answer from the above steps.
Note: It is valid to pass negative values to the setDate function and it will work correctly.
For the code about Monday. You have that special case because getDay() orders Sunday before Monday. So we are basically replacing getDay() in that case with a value of getDay()'s saturday value + 1 to re-order sunday to the end of the week.
We use the value of 6 for subtraction with Monday because getDay() is returning 1 higher for each day than we want.
function previousWeekSunday(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate() - d.getDay() - 7);
}
function previousWeekMonday(d) {
if(!d.getDay())
return new Date(d.getFullYear(), d.getMonth(), d.getDate() - 13);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() - d.getDay() - 6);
}
I didn't quite understand other people's posts. Here is the javascript I use to display a Sun-Sat week relative to a given day. So, for instance, to get "last week," you're checking what the Sun/Sat goalposts were relative to seven days ago: new Date()-7
// variables
var comparedate = new Date()-7; // a week ago
var dayofweek = comparedate.getDay();
// just for declaration
var lastdate;
var firstadate;
// functions
function formatDate (dateinput) // makes date "mm/dd/yyyy" string
{
var month = dateinput.getMonth()+1;
if( month < 10 ) { month = '0' + month }
var date = dateinput.getDate();
if( date < 10 ) { var date = '0' + date }
var dateoutput = month + '/' + date + '/' + dateinput.getFullYear();
return dateoutput;
}
// Sunday to Saturday ... Sunday is the firstdate, Saturday is the lastdate
// (modify this block if you want something different eg: Monday to Sunday)
if ( dayofweek == 6 ) { lastdate = comparedate; firstdate = comparedate-6; } // Saturday
else if ( dayofweek == 0 ) { lastdate = comparedate+6; firstdate = comparedate; } // Sunday
else if ( dayofweek == 1 ) { lastdate = comparedate+5; firstdate = comparedate-1; } // Monday
else if ( dayofweek == 2 ) { lastdate = comparedate+4; firstdate = comparedate-2; } // Tuesday
else if ( dayofweek == 3 ) { lastdate = comparedate+3; firstdate = comparedate-3; } // Wednesday
else if ( dayofweek == 4 ) { lastdate = comparedate+2; firstdate = comparedate-4; } // Thursday
else if ( dayofweek == 5 ) { lastdate = comparedate+1; firstdate = comparedate-5; } // Friday
// Finish
var outputtowebpage = formatDate(firstdate) + ' - ' + formatDate(lastdate);
document.write(outputtowebpage);
I have to look this up every time I need to do it. So, I hope this is helpful to others.
First day of week can be either Sunday or Monday depending on what country you are in:
function getPrevSunday(a) {
return new Date(a.getTime() - ( (7+a.getDay())*24*60*60*1000 ));
};
function getPrevMonday(a) {
return new Date(a.getTime() - ( (6+(a.getDay()||7))*24*60*60*1000 ));
};
If you want to set a dateobject to the previous sunday you can use:
a.setDate(a.getDate()-7-a.getDay());
and for the previous monday:
a.setDate(a.getDate()-6-(a.getDay()||7));
In the other examples you will have a problem when sunday falls in other month. This should solve the problem:
var today, todayNumber, previousWeek, week, mondayNumber, monday;
today = new Date();
todayNumber = today.getDay();
previousWeek = -1; //For every week you want to go back the past fill in a lower number.
week = previousWeek * 7;
mondayNumber = 1 - todayNumber + week;
monday = new Date(today.getFullYear(), today.getMonth(), today.getDate()+mondayNumber);