I am working on a site for a client, on the site I use the Jquery UI Calendar, I need to be able to highlight 3 business days starting 2 days after the current date but incorporate math to not count the weekends. Here is my fiddle:
JS Fiddle
Here is the HTML
<input type="text" id='datepicker'>
Here is the JS
var SelectedDates = {};
SelectedDates[new Date('04/14/2014')] = new Date('04/14/2014');
SelectedDates[new Date('04/15/2014')] = new Date('04/15/2014');
SelectedDates[new Date('04/16/2014')] = new Date('04/16/2014');
$('#datepicker').datepicker({
minDate: 2,
maxDate: "+4M +15D",
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
} else {
return [true, '', ''];
}
}
});
I am having trouble adding beforeShowDay: $.datepicker.noWeekends to the code above. I also need the 3 dates that are highlighted to be variable so they change depending on what the current date is but I am still learning JS and I don't understand the logic behind that.
I have looked all over this site and others and although there are a lot of questions/answers on how to highlight specific dates, none fully apply to what I am trying to do.
So just to clarify I need to do math to figure out how to negate the minDate and weekends and highlight the next three business days.
This should do it:
jsFiddle example
$(document).ready(function () {
var css, count = 0,
gap = 0,
today = new Date();
$('#datepicker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
minDate: 2,
maxDate: "+4M +15D",
beforeShowDay: function (date) {
var day = date.getDay();
var diff = new Date(date - today);
var numDays = Math.ceil(diff / 1000 / 60 / 60 / 24);
if (numDays > 0 && count < 3) {
if (day != 6 && day != 0) {
gap++;
if (gap > 1) {
count++;
css = 'Highlighted';
} else css = '';
}
} else css = '';
return [(day != 6) && (day != 0), css]; //0-Sunday 6-Saturday
},
onSelect: function () {
count = 0;
gap = 0;
}
});
});
UPDATE
Here is one way to do it:
var currentDay = new Date();
var dayOfWeek;
var highlighted = 0;
var count = 0;
var SelectedDates = {};
while(highlighted < 3){
dayOfWeek = currentDay.getDay();
if(dayOfWeek != 0 && dayOfWeek != 6){
if(count > 1){
alert(currentDay);
var month = currentDay.getMonth()+1;
if(month.toString().length < 2)
month = '0'+month;
var day = currentDay.getDate();
if(day.toString().length < 2)
day = '0'+day;
var year = currentDay.getFullYear();
var dateStr = month+"/"+day+"/"+year;
SelectedDates[new Date(dateStr)] = new Date(dateStr);
highlighted++;
}
else {
count++;
}
}
currentDay = new Date(currentDay.getTime() + (24 * 60 * 60 * 1000));
}
Example:
FIDDLE
Related
i want to calculate the range between 2 dates without counting weekend in javascript. i have some code that already count the range between them. but i'm stuck with the weekend part. date inputed by CJuiDatePicker in YII framework
<script>
function calcDay(dt1, dt2, range){
var msec1 = dt1;
var date1 = new date(msec1);
var msec2 = dt2;
var date2 = new date(msec2);
if(date1>0 || date2>0){
range.val(isFinite(Math.round(date2-date1)/86400000) || 0);
}
};
</script>
86400000 is day in millisecond
thanks in advance
The function you'll need is getUTCDay().
the pseudo code would be as follows:
1 - determine full weeks (days/7 truncated)
2 - calculate weekday/weekend: 2 * result = weekend days, 5 * result = weekdays.
3 - after that, remainder and starting day of week will determine the 1 or 2 additional days
Hope that helps, let me know if you need the javascript,
- John
Edited, as requested. NOTE: tweaked your original for testing, you should spot the needed changes to restore.
function calcDay(dt1, dt2, range)
{
var msec1 = "October 13, 2014 11:13:00";
var date1 = new Date(msec1);
var msec2 = "October 13, 2013 11:13:00";
var date2 = new Date(msec2);
var days;
var wdays;
var startday;
var nLeft;
// neither should be zero
if(date1>0 && date2>0) {
days = Math.round( Math.abs((date2-date1)/86400000) );
wdays = Math.round(days / 7) * 5;
nLeft = days % 7;
startday = (date1 > date2) ? date2.getUTCDay() : date1.getUTCDay();
if (startday < 2) {
wdays += Math.max(nLeft+startday-1,0);
} else if (startday == 6) {
wdays += Math.max(nLeft-2,0);
} else if (nLeft > (7-startday)) {
wdays += (nLeft-2)
} else {
wdays += Math.min(nLeft, 6-startday)
}
}
};
i found my own solution, but i forgot to share it. this is how i make it
function myUpdate(dt1, dt2,range){
var msec1 = dt1;
var date1 = new Date(msec1);
var msec2 = dt2;
var date2 = new Date(msec2);
var diff = (isFinite(Math.round (date2 - date1) / 86400000) && Math.round (date2 - date1) / 86400000 || 0);
var wEnd=0;
if(date1>0 || date2>0){
for(var i=0; i<=diff; i++){
if(date1.getDay() ==6 || date1.getDay()==0){
wEnd = wEnd + 1;
}
date1.setDate(date1.getDate() + 1);
}
}
range.val(Math.round((diff-wEnd)+1));
};
first u should count the different date, then the date1 will be check if it is sunday or saturday. then date1 will be added 1 till the value of date1 is equal to date2. if date1 is/are saturday or sunday, wEnd will gain 1. so u can substract diff with wEnd. hope this can help u guys
I have this Javascript code, where I have a condition for 3 days after the current date and one for the current day. I would need to add a condition for 3 days previous to the current date. How can I do that?
$('.entry-date').each(function() {
var dateString = $(this).text();
var parts = dateString.split("-");
var date = new Date(parseInt(parts[2]), parseInt(parts[1])-1, parts[0]);
var now = new Date();
var diff = dateDiffInDays(now, date);
if ((diff < 3) && (diff > 0)) {
$(this).parent().addClass("new-entry");
}
if (diff == 0) {
$(this).parent().addClass("today");
}
});
Sorry for posting this simple question. Application is going to be deployed soon, and recently a bug came, but i am not able to figure out why it is comming.
Created A JS_BIN this is the link
http://jsbin.com/razufavuru/1/edit?html,js,output
Error is minDate: 0 is disabling today's date also while i want to disable only past dates.
This is jquery code:
$("#leaveEndDate").datepicker(
{
minDate: 0,
beforeShowDay : disablePublicHolidaysAndWeekends,
minDate : dateToday,
onSelect : function(dateText, inst) {
var firstDate = $("#leaveStartDate").datepicker('getDate');
var selDate = null;
selDate = $(this).datepicker('getDate');
var lastDate = selDate;
if (lastDate < firstDate) {
$("#leaveEndDate").val('');
$("#endDateError").html(
"End Date must be greater than Start Date");
$(inst).datepicker('show');
} else {
$("#endDateError").html("");
calculateDays(firstDate, lastDate);
}
}
});
Disable Holiday and Weekends Method is
function disablePublicHolidaysAndWeekends(date) {
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();
if(day < 10 && day > 0){
day = '0'+day;
}
var getdate = year+ '/' + '0' +(month + 1) + '/' + day;
for (var i = 0; i < publicHolidayDates.length; i++) {
if ($.inArray( getdate ,publicHolidayDates) != -1 || new Date() > date) {
return [ false ];
}
}
var noWeekend = $.datepicker.noWeekends(date);
return !noWeekend[0] ? noWeekend : [ true ];
}
this is the img
public holidays are comming from database.
It confuse me lot when this code for another datapicker works.
$("#targetDate").datepicker({
beforeShowDay : $.datepicker.noWeekends,
minDate : 0
});
Here it do not disable today date.
this is the img
jQuery Datepicker value minDate expect value of type
Type: Date or Number or String
Try minDate: new Date() instead, or minDate: '0'
UPDATE:
What causes your issue is your custom function:
function disablePublicHolidaysAndWeekends(date) {
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();
if(day < 10 && day > 0){
day = '0'+day;
}
if(month < 9 && month > 0){ //added control over month, as you would have got errors for month=10, 11, 12 in the below variable getdate
month = '0' +(month + 1);
}
else{
month += 1;
}
var getdate = year+ '/' + month + '/' + day;
for (var i = 0; i < publicHolidayDates.length; i++) {
//removed "|| new Date() > date"
if ($.inArray( getdate ,publicHolidayDates) !== -1 ) {
return [ false ];
}
}
var noWeekend = $.datepicker.noWeekends(date);
return !noWeekend[0] ? noWeekend : [ true ];
}
Read this about Date comparison in javascript
Fiddle here
I'm in creating appointment form with jQuery datepicker. I've search around but seems that I can't combine all function I want in the beforeshowday.
What I want from the datepicker is disabled all date before today (yesterday and the rest of it because you can't make appointment at date before today it must be later), then disabled on every Sunday (its non working day) and public holiday (this one using array). What I saw from others is the jQuery are specifically for only one function like public holiday it just an array, but how about disabled previous day and sunday?
I tried to follow this articles http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/ but I don't know how to combine it. Can someone show me how?
I have this to disabled on every Sunday
function disabledSunday(date) {
var day = date.getDay();
return [(day != 0), ''];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: disabledSunday
});
This one for alldates till today
var date = new Date();
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
// Disable all dates till today
$('#datepicker').datepicker({
minDate: new Date(y, m, d),
dateFormat: 'mm-dd-yy',
});
This one is for specific dates such as public holiday
// Disable a list of dates
var disabledDays = ["5-31-2013", "6-01-2013"];
function disableAllTheseDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1) {
return [false];
}
}
return [true];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: disableAllTheseDays
});
How to combine these three function into one, I'm not much into Jquery and javascript
try this :-
html code :
<input id="txtDate" />
function disabledays(date) {
var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
//if u have to disable a list of day
var removeDays = ["2013-6-11","2013-6-31" ];
if ($.inArray(ymd, removeDays) >= 0) {
return [false];
} else {
//Show accept sundays
var day = date.getDay();
return [(day == 1 || day == 2 || day == 3 || day == 4 ||day == 5 ||day == 6 )];
}
}
$(function () {
$('#txtDate').datepicker({
beforeShowDay: disabledays
});
});
Try this
$("#datepicker").datepicker({ minDate: 0 });
You can use minDate option to disable past dates. In addition, you can use beforeShowDay option to check the other two conditions**.
$("#datepicker").datepicker({
minDate: 0,
beforeShowDay: function (date) {
// it is possible to write the following function using one line
// of code; instead, multiple if/else are used for readability
var ok = true;
if (date.getDay() === 0) { // is sunday
ok = false;
} else {
var dateStr = $.datepicker.formatDate("m-dd-yy", date);
if ($.inArray(dateStr, disabledDays) >= 0) { // is holiday
ok = false;
}
}
return [ok, ""];
}
});
});
** Actually it is possible to check all three conditions in that function.
May u will find your slution here
http://jqueryui.com/datepicker/#min-max
I have some problem with hiding days in datepicker depending of day of week e.g. if today is friday hide saturday and if today is saturday - hide sunday.
I have this code who check what day is today:
$(function () {
var day_date = new Date();
var weekday = new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var n = weekday[day_date.getDay()];
$('#day_of_week').val(n);
});
I also have this code to hide (but whole) weekends and days who always be hidden:
var disabledDays = ['15/8/2012', '1/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];
function nationalDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray(d + '/' + (m + 1) + '/' + y, disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
On datepicker the line who "execute" above code looks like this:
beforeShowDay: noWeekendsOrHolidays,
I try to do this with this code, but it didn't work:
$('#day_of_week').change(function()
if( $("#day_of_week").val() == Friday ) {
$("#date_from, #date_to").datepicker({
beforeShowDay: noWeekendsOrHolidays
});
}
else {
}
});
I will be very grateful for any help.
I am using a date picker in which it automatically work on hiding date.
I hope it will helpful to you.
http://multidatespickr.sourceforge.net/#maxPicks-demo
I got a link regarding this and hopefull it will work.
http://multidatespickr.sourceforge.net