We Keep Coding

How to disable all days in month except 2nd and 4th week's Thursday in Kendodatepicker

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" />

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' />

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']
}
}

datepicker from - to and select x-value for set x-month later

I have an datepicker from - to.
For the date -to i use an select value (stands for x month later).
My code works only, f.e when i set a number like 6 (date.setMonth(date.getMonth() + 6 );).
What is wrong?
My code is http://jsfiddle.net/uFcX7/3/
$(function (form) {
var month = $('select[name=GetMes]').val();
$(".fecha_inicio").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (dateText, instance) {
date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
date.setMonth(date.getMonth() + month);
//date.setMonth(date.getMonth() + 6);
$(".fecha_fin").datepicker("setDate", date);
}
});
$(".fecha_fin").datepicker({
dateFormat: "dd/mm/yy"
});
});
When i use select value, the date are wrong.

This is because Javascript month has the range of 0 - 11. You would need to work out the difference and add a year. For instance:
if((date.getMonth() + month) > 11)
you will want to add 1 year to the date and then add the difference on months i.e.
date.setMonth(date.getMonth() + (month - 11));

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/