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 to get date in specific format

I want to have the dateformat in this format: 2015-08-04T00:00:00Z.
so first year, month, day.
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
onSelect: function (dateText, inst) {
var dt = $.datepicker.formatDate('yy-mm-dd', dateText, "getDate")
alert(dt);
var hallo = $("#form_inp1").val() + 'T00:00:00Z';
alert(dateText);
alert(hallo);
//$("#form_inp1").datepicker("getDate");
//alert($("#form_inp1").formatDate('yy-mm-dd', dateText, "getDate")
},
But If I do an alert(dateText) I see the format as: 4-8-2015 and it has to be: 2015-08-04.
Thank you
If I try it like this:
onSelect: function (dateText, inst) {
dateText = dateText.split("-");
dateText = new Date('' + dateText[2] + '-' + dateText[1] + '-' + dateText[0] + '');
alert(dateText);
}
I get invalid date
So this var hallo = $("#form_inp1").val() + 'T00:00:00Z';
returns: 4-8-2015T00:00:00Z . But it has to be:2015-08-04T00:00:00Z.
Thank you

Quick fix is to change the date format using plain Javascript. This can be achieved by following script.
dt= dt.split("-");
dt = new Date('' + dt[2] + '-' + dt[1] + '-' + dt[0] + '');
to add zero in case the day, month and year is below 10, use following method.
function AddTrailingZero(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
Let me know if you have any question related to the code snippet above.

Function of Fullcalendar plugin dont insert correctly on mysql table

Im using FullCalendar plugin to have a web calendar and show/insert events from my mysql table. It shows correctly the events from the bd but dont insert the date of the event in the correct format. (YYYY-MM-DD). Both columns of the mysql table are DATE type with the same format of the event that will be insert.
This is my JS script to show events and insert via ajax to mysql
$(document).ready(function() {
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth();
var yyyy = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
events: "http://localhost/test-fullcalendar/php/eventos.php",
lang: "es",
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Evento a insertar:');
if (title) {
start = $.fullCalendar.moment('yyyy mm dd');
end = $.fullCalendar.moment('yyyy mm dd');
$.ajax({
url: 'http://localhost/test-fullcalendar/php/add_evento.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
alert('OK');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
}
});
});
The problem is with the function moment() of Fullcalendar on lines:
start = $.fullCalendar.moment('yyyy mm dd');
end = $.fullCalendar.moment('yyyy mm dd');
The function dont receive correctly the actual date and only insert "0000-00-00" on my table. I try to pass the date in the moment() argument like:
var date = yyyy + '-' + mm + '-' + dd;
start = $.fullCalendar.moment(date);
But it insert "0000-00-00" too.

Your formatting is incorrect so you are actually returning NaN.
Where you are passing 'yyyy mm dd', you should instead be passing the start variable, so:
$.fullCalendar.moment('yyyy mm dd');
should be
$.fullCalendar.moment(start).format('YYYY MM DD');
Additionally, note that your date format needs to be uppercase, per the Moment.js site, and can more simply be written as moment(start).format('YYYY MM DD');
DEMO
$('#fullCal').fullCalendar({
header: {
left: '',
center: 'prev title next today',
right: ''
},
selectable: true,
select: function(start, end, allDay) {
var title = prompt('Evento a insertar:');
if (title) {
start = moment(start).format('YYYY MM DD');
end = moment(end).format('YYYY-MM-DD'); /* w/ dashes if that is what you need */
alert('start: ' + start + ' end: ' + end);
/*rest of your code... */
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>

the javascript function date.getMonth() would return 2 for the month March, but you want '03'
so use this:
var mm = date.getMonth()+1;
mm=(mm<=9)?'0'+mm:mm;

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.

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