We Keep Coding

jquery UI datpicker highlight the week instead of day

I have this code for jquery UI datepicker modified to select a complete week, i want to highlight the current selected week, right now the activate date which is today is highlighted but i want it should the entire week starting from sunday
the code is already selecting the week when i clik on any row, but the only issue is on load it does not select the current week, it just select the todays date
Here is the code i am using
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
changeMonth: true,
changeYear: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
any idea how can i do this
html is
<div class="week-picker"></div>
here is the fiddle
https://jsfiddle.net/6mbp3Lgn/
i want that today is 3rd nov, it should keep the first row selected because 3rd falls in first week and like that

Stuck trying to get datepicker to play nice with a set date for second date picker

Question is I have two date pickers what called leave_start the other leave_end. I have some custom things going on to block out weekends and set a minDate as today and also block out custom holidays. I however cant seem to figure out why I cant grab the val date from the first date picker(leave_start) and set it as a minDate in my second datepicker(leave_end). Everything else works great just cant seem to get this to work. Any help would be greatly appreciated!
Side note this is a ruby on rails app
Using jquery datepicker.
Here is my Application.js
$(document).ready(function() {
var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
var start = $("#leave_start").val();
$('#leave_start').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_end').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: start,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
}):

You can set a change event handler on the first datepicker to update minDate of the second.
Simple Example:
$('#date1').datepicker();
$('#date2').datepicker();
$('#date1').change(function() {
$( "#date2" ).datepicker( "option", "minDate", $('#date1').val() );
});
See working demo: http://jsfiddle.net/ddan/jon3xt3e/1/
EDIT
Example using your settings and javascript:
$(document).ready(function() {
var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
var start = $("#leave_start").val();
$('#leave_start').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_end').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: start,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_start').change(function() {
$( "#leave_end" ).datepicker( "option", "minDate", $('#leave_start').val() );
});
});
Working example: http://jsfiddle.net/ddan/jon3xt3e/2/

Use the onSelect method of the first to change the option of the second. your current attempt will only get the value of the input on page load so it requires binding to events to make the changes as well as using the API to change options
function beforeShow(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
$(function() {
var start = $("#leave_start").val();
$('#leave_start').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(date, ui) {
$leave.datepicker('option', {'minDate': date});
},
beforeShowDay: beforeShow
});
var $leave = $('#leave_end').datepicker({
minDate: start,
dateFormat: "yy-mm-dd",
onSelect: function(d, ui) {
//do something when leave selected
},
beforeShowDay: beforeShow
});
});
Also note that you have beforeShowDay property twice in your plugin definition objects
DEMO

Datepicker onSelect to format new date range

I have 2 datepickers, one is a fromDate and one is a toDate. I can highlight the range from the fromDate to the toDate successfully in beforeShowDay(), but I need it to highlight when new values are selected. This triggers the onSelect statement. Is there a way to either:
1) trigger the beforeShowDay again? or
2) get all the dates of the new range and apply a css class to them?
beforeShowDay: function(date){
if (date >= initialFromDate && date <= initialToDate) {
return [true, 'ui-individual-date', ''];
}
else {
return [true, '', ''];
}
},
onSelect: function (dateText, obj) {
var fromDate = new Date(dateText);
var toDate = $(".dateDiv2").datepicker('getDate');
**get individual dates?
if (individualdate >= fromDate && individualDate <= toDate)
apply css class or formatting to individualDate**
},

I have done this successfully with a datepicker for a from date and a datepicker for a to date, so I modified it for one datepicker. Here is the code:
$(function () {
var today = new Date();
var thisYear = (today).getFullYear();
var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range
var toDate = '1/7/2000' // this is the initial to date to set the datepicker range
//... initialize datepicker....
},
beforeShowDay: function(date){
//if the date is in range
if (date >= fromDate && date <= toDate) {
return [true, 'ui-individual-date', '']; //applies a css class to the range
}
else {
return [true, '', ''];
}
},
onSelect: function (dateText, obj) {
//sets the new range to be loaded on refresh call, assumes last click is the toDate
fromDate = toDate;
toDate = new Date(dateText);
$(".classDp1").datepicker("refresh");
$(".classDp2").datepicker("refresh");
},
Every time you refresh the beforeShowDay function is called with the new fromDate and toDate range. Having the variables outside the function and modifying them within enables the highlighting from the css to be applied on each click.

Link on jsFiddle
HTML:
<div id="dateFrom"></div>
<div id="dateTo"></div>
CSS:
div#dateFrom, div#dateTo { display: inline-block; }
.ui-individual-date { background: yellow; }
JS:
$( function() {
$( "#dateFrom, #dateTo" ).datepicker( {
beforeShowDay: function( date ){
var initialFromDate, initialToDate;
initialFromDate = $("#dateFrom").datepicker('getDate');
initialToDate = $("#dateTo").datepicker('getDate');
if ( date >= initialFromDate && date <= initialToDate ) {
return [ true, 'ui-individual-date', '' ];
} else {
return [ true, '', '' ];
}
},
onSelect: function ( dateText, obj ) {
$( "#dateFrom" ).datepicker( "refresh" );
$( "#dateTo" ).datepicker( "refresh" );
}
} );
} );
Just in beforeShowDay change initialFromDate and initialToDate to $("#dateFrom").datepicker('getDate') and $("#dateTo").datepicker('getDate').
And in onSelect use $( "#dateFrom" ).datepicker( "refresh" ); and $( "#dateTo" ).datepicker( "refresh" );.

jQuery UI datepicker range selector issue

Created date picker with range selector with help from this answer
When we select date from "1st May" and to "1st Aug", user not able to change "from" date previous than 1st May.
Is there any solution in this case that instead of not allowing user browse the date than min date. User should be allowed to go prev. date but with alert or notification that they have selected wrong date range.
Code snippet : credit
$(function() {
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'TO' minDate
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
// Set 'TO' maxDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() + 3);
if(dt < Date.now()) {
$("#to-datepicker").datepicker("option", "maxDate", dt);
}
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'FROM' maxDate
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
// Set 'FROM' minDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() - 3);
if(dt < Date.now()) {
$("#from-datepicker").datepicker("option", "minDate", dt);
}
}
});
});
http://jsfiddle.net/4Ln0cxpq/

Try this in JsFiddle
$(function() {
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
onClose: function (selectedDate) {
var dt = new Date($(this).datepicker("getDate"));
var dtTo = new Date($("#to-datepicker").datepicker("getDate"));
if($("#to-datepicker").val()!="" && dt > dtTo) {
$("#from-datepicker").val("");
alert("selected date greater than 'To' date");
}
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
onClose: function (selectedDate) {
var dt = new Date($(this).datepicker("getDate"));
var dtFrom = new Date($("#from-datepicker").datepicker("getDate"));
if($("#from-datepicker").val()!="" && dt<dtFrom){
$("#to-datepicker").val("");
alert("selected date less than 'From' date");
}
}
});
});

Your code set -3,+3 month from selected one.
Try this fiddle: JSFiddle

you can remove this:
// Set 'TO' minDate
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
and this:
// Set 'FROM' maxDate
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
Then add your check if FROM is greater than TO, if True, show your custom notification
DEMO

How to Add a day on jquery calendar

I am using this code to create a jquery calendar on my page
$(function(){
//set the datepicker
var dateToday = new Date();
$('#pikdate').datetimepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
});
how to add a day in this calendar that calendar should be start from after 24 hour.

You can do like this.
$('#pikdate').datepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});

You could add a day in the date you are setting as "minDate".
See the example here (I changed your code):
$(function(){
//set the datepicker
var dateToday = new Date();
dateToday.addDays(1); // it will add one day to the current date (ps: add the following functions)
$('#pikdate').datetimepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
});
But to make the "addDays" function work you must create the function as you can see down.
I always create 7 functions, to work with date in JS: addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addYears.
You can see an example here: http://jsfiddle.net/tiagoajacobi/YHA8x/
This are the functions:
Date.prototype.addSeconds = function(seconds) {
this.setSeconds(this.getSeconds() + seconds);
return this;
};
Date.prototype.addMinutes = function(minutes) {
this.setMinutes(this.getMinutes() + minutes);
return this;
};
Date.prototype.addHours = function(hours) {
this.setHours(this.getHours() + hours);
return this;
};
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Date.prototype.addWeeks = function(weeks) {
this.addDays(weeks*7);
return this;
};
Date.prototype.addMonths = function (months) {
var dt = this.getDate();
this.setMonth(this.getMonth() + months);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
Date.prototype.addYears = function(years) {
var dt = this.getDate();
this.setFullYear(this.getFullYear() + years);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
They are propotype functions it means that every variable from the type "Date" will have this functions.