We Keep Coding

minDate not set on date pickers

I have to date pickers and I need both to have the same options and set of dates. I have a .each to do this, but the minDate option is not set. I've had a look around and seen that the way to set this when using beforeShowDay is to add the option after the control has initialized, but that doesn't seem to be working.
Here's the code:
// Defines and manipulates the datepickers
job.dateControl = function() {
var datepickers = $(".js-datepicker");
datepickers.each(function () {
var dateToday = new Date();
$(this).datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 2,
dateFormat: "dd/mm/yy",
beforeShowDay: function (d) {
var dmy = "";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate();
dmy += "/";
if (d.getMonth() < 9) dmy += "0";
dmy += (d.getMonth() + 1);
dmy += "/";
dmy += d.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, job.unavailableDates)));
if ($.inArray(dmy, job.unavailableDates) !== -1) {
return [false, "", "Unavailable"];
} else {
return [true, "", "Available"];
}
},
minDate: dateToday
});
$(this).datepicker("option", "minDate", dateToday);
});
}
The 'job.unavailableDates' array containan array of UK bank holidays in the string format "dd/mm/yyyy".

How can i get the day month and year from my datepicker?

this is my aspx code for my calendar:
<script src="jQuery/js/jquery-ui-1.10.4.custom.min.js"></script>
<link href="jQuery/css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
<script type="text/javascript">
jQuery(function () {
$.datepicker.regional['he'] = {
closeText: 'סגור',
prevText: '<הקודם',
nextText: 'הבא>',
currentText: 'היום',
monthNames: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני',
'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
monthNamesShort: ['ינו', 'פבר', 'מרץ', 'אפר', 'מאי', 'יוני',
'יולי', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
dayNames: ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת'],
dayNamesShort: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
dayNamesMin: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 0,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['he']);
jQuery("#<%=datepicker.ClientID%>").datepicker();
**var day = jQuery("#<%=datepicker.ClientID%>")('getDate').getDate();
var month =jQuery("#<%=datepicker.ClientID%>")('getDate').getMonth();
var year = jQuery("#<%=datepicker.ClientID%>")('getDate').getYear();
alert(day + '-' + month + '-' + year);**
});
</script>
I want to get the day, month and year from my calendar- what am i doing wrong in these 3 rows? how can i separate it?
Thank you very much!

You are missing .datepicker when calling the getDate() method on your Datepicker.
var day = jQuery("#<%=datepicker.ClientID%>").datepicker('getDate').getDate();
var month =jQuery("#<%=datepicker.ClientID%>").datepicker('getDate').getMonth();
var year = jQuery("#<%=datepicker.ClientID%>").datepicker('getDate').getYear();
alert(day + '-' + month + '-' + year);
Or more concisely, and using getFullYear() plus detecting a null date:
var myDate = jQuery("#<%=datepicker.ClientID%>").datepicker('getDate');
var myAlert = (!myDate)? "no date set" : myDate.getDate() + '-' + myDate.getMonth() + '-' + myDate.getFullYear();
alert(myAlert);
See it working in this jsFiddle.

Navigating between weeks on jquery datepicker via external buttons

I am working on asp.net mvc. I am trying to show a datepicker in a web page, along with two buttons i.e. previous and next which are for navigating between weeks in datepicker. I am able to show datepicker and able to select total week dates based on user selected date, like
$('#txtSrchFrom').datepicker({
showOtherMonths: 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));
if (startDate.getMonth() == endDate.getMonth()) {
$('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + endDate.getDate() + ", " + startDate.getFullYear());
}
else {
$('#txtSrchFrom').val(getMonthName(startDate.getMonth()) + " " + startDate.getDate() + " - " + getMonthName(endDate.getMonth()) + " " + endDate.getDate() + ", " + startDate.getFullYear());
}
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();
}
});
$('#txtSrchFrom .ui-datepicker-calendar tr').live('mousemove', function () { $(this).find('td a').addClass('ui-state-hover'); });
$('#txtSrchFrom .ui-datepicker-calendar tr').live('mouseleave', function () { $(this).find('td a').removeClass('ui-state-hover'); });
and here is my markup,
<input type="button" class="btn btn-info" value="<< Prev" />
<div class="input-group" style="width: 220px;">
<input type="text" class="form-control" id="txtSrchFrom" name="txtSrchFrom" readonly="readonly" placeholder="Search by From Date" />
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
<input type="button" class="btn btn-info" value="Next >>" onclick="return gotoNextweek();"/>
<br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
Suppose I am currently in 1st week, and when i click on next button i need to switch to next week and all dates in that week needs to be selected. and previous button needs to work in a similar way. I have tried it by setting the endDate + 7 days to datepicker like,
function gotoNextweek() {
var $picker = $("#txtSrchFrom");
var date = new Date($picker.datepicker('getDate'));
date.setDate(endDate.getDate() + 7);
return false;
}
but it doesn't works for me. Please guide me, how to achieve this.

If you just want to add 7 days to the current selected date use:
var new_date = $("#datepicker").datepicker( "getDate" );
new_date = new_date.setDate(new_date.getDate()+7);
new_date = new Date(new_date);
$( "#datepicker" ).datepicker( "setDate", new_date );

The date returned from $picker.datepicker('getDate') is already a date object, you can't pass it to new Date() once more
$('#next, #prev').on('click', function(e) {
var date = $('#datepicker').datepicker('getDate');
e.target.id == 'next' ? date.setDate(date.getDate()+7) : date.setDate(date.getDate()-7);
$('#datepicker').datepicker('setDate', date );
});
FIDDLE

jquery: using two datepicker with two fields ( field 1 , field2 + 1 day ) like booking.com

How r u?
I have two datepickers with two fields
I want when the user choosing (From) the second field ( TO ) will be next day . like booking.com
for example: when the user choose From 01-01-2013 , directly the second field TO 02-01-2013 (next day) ...
look at this picture for the form
this is code of jquery:
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1D",
changeMonth: true,
numberOfMonths: 1,
dateFormat:"dd-mm-yy",
minDate: "+1D",
showOn: "button",
buttonImage: "http://keith-wood.name/img/calendar.gif",
buttonImageOnly: true ,
onSelect: function(dateText, inst){
var d = dateFormat(new Date(dateText + 1), "DD/MM/YYYY");
$("#to").val(d);
}
});
this is my html code:
<form method="get" action="">
<input type="submit" value="choose"/>
<p><input type="text" name="from" id="from" />From<br/>
<input type="text" name="to" id="to" />To
</p>
</br>
</form>
how can do it?

onSelect: function(dateText, inst){
var d = $.datepicker.parseDate(inst.settings.dateFormat, dateText);
d.setDate(d.getDate()+1);
$("#to").val($.datepicker.formatDate(inst.settings.dateFormat, d));
}

I have created a working JSFiddle for you:
http://jsfiddle.net/jirilmongeorge/f329k/26/
Here is the javascript code:
$(document).ready(function() {
$( "#from" ).datepicker({
defaultDate: "+1D",
changeMonth: true,
numberOfMonths: 1,
dateFormat:"dd-mm-yy",
minDate: "+1D",
showOn: "button",
buttonImage: "http://keith-wood.name/img/calendar.gif",
buttonImageOnly: true ,
onSelect: function(dateText, inst){
var d = $.datepicker.parseDate(inst.settings.dateFormat, dateText);
d.setDate(d.getDate()+1);
$("#to").val($.datepicker.formatDate(inst.settings.dateFormat, d));
}
});
$( "#to" ).datepicker({
showOn: "button",
buttonImage: "http://keith-wood.name/img/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true
});
$('#from').attr('readonly', true);
$('#to').attr('readonly', true);
});

you need to convert your dateText into the right format of date, then plus one and set back to the #to value
var from = dateText.split("-");
var fDate = new Date(from[2], from[1] - 1, from[0]);
var newdate = new Date(fDate);
newdate.setDate(newdate.getDate() + 1);
$("#to").val(newdate.getDate() + "-" + newdate.getMonth() + "-" + newdate.getFullYear());

How to get datepicker to be highlighted upon refresh

I have a datepicker that highlights a selected week. It is using an ajax request. Which is where I am having a problem. When I select a week i.e. 29/08/11 and the page refreshes the highlighted week is no longer highlighted.
Datepicker.js
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; <<
At this point above this is where the window is refreshed and it GETs the URL. So that when I select a date it outputs like the following http://0.0.0.0:3000/timesheet?week_commencing=2011-09-05
},
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').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
index.html.erb
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}
Note
The window.onload URL function gets the week commencing from the url
Jsfiddle - Including datepicker
http://jsfiddle.net/YQ2Zw/12/
Update

You can use the defaultDate to set the initial date selected on the datepicker, and simulate a click event on the calendar to highlight the week:
var selectDate = '09/29/2011';
$('.week-picker').datepicker({
defaultDate: selectDate
}).click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
}).click();
Example: http://jsfiddle.net/william/YQ2Zw/15/
Update
Assuming Datepicker.js is loaded in timesheet, you should be able to do that with two more lines:
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
$('.week-picker').datepicker({
defaultDate: mm + '/' + dd + '/' + yy
}).click();
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}