Develop Reference

Default JQuery UI datepicker to first available date in collection

I have the following date picker setup so that only the dates in the available dates collection defined in the page can be selected:
var availableDates = ["08-12-2015","29-12-2015"];
$('.departureDate').datepicker({
beforeShowDay: departureDates,
onSelect: filterInstances,
altField: '#uniformDate',
altFormat: 'dd-mm-yy',
defaultDate: get_default_date
});
function departureDates(date) {
// Change the format of the date for local independent comparison
var dmy = jQuery.datepicker.formatDate('dd-mm-yy', date);
if (availableDates.indexOf(dmy) == -1) {
return [false];
} else {
return [true];
}
}
function get_default_date() {
var date = new Date(availableDates[0])
return date;
}
The problem I have now is that my date picker won't default to the first available date.
In my Firebug console i receive the following error using the code shown above:
TypeError: i.getTime is not a function
http://localhost:54044/scripts/jquery-ui-1.11.4.min.js Line 8
Any help with this issue would be greatly appreciated.
Cheers,
jezzipin

For all of those interested in this post, this was the solution:
$('.departureDate').datepicker({
beforeShowDay: departureDates,
onSelect: filterInstances,
altField: '#uniformDate',
altFormat: 'dd-mm-yy',
defaultDate: get_default_date()
});
function departureDates(date) {
// Change the format of the date for local independent comparison
var dmy = jQuery.datepicker.formatDate('dd-mm-yy', date);
if (availableDates.indexOf(dmy) == -1) {
return [false];
} else {
return [true];
}
}
function get_default_date() {
var date = availableDates[0];
date = date.split("-");
date = new Date(date[2], date[1] - 1, date[0]);
return date;
}

You need to invoke get_default_date.
Replace:
defaultDate: get_default_date
With:
defaultDate: get_default_date()
get_default_date returns the function. get_default_date() returns whatever the function returns, so in this case, the default date.
Also, your date strings are formatted incorrectly. Instead of dd-mm-yyyy, the Date constructor expects mm-dd-yyyy.
Replace:
var availableDates = ["08-12-2015","29-12-2015"];
With:
var availableDates = ["12-08-2015","12-29-2015"];

The date format you are using is wrong.
08-12-2015 became : Wed Aug 12 2015 00:00:00 GMT+0200 (CEST) and is not in the valid date range.
29-12-2015 is invalid.

Bootstrap datepicker format date differently on display than on value

I want to use Twitter Bootstrap's datepicker. I want the actual input to DISPLAY in the format mm/dd/yyyy but the value of the object I want it to create/pass should be in yyyy-mm-dd. I am aware of this property:
"data-date-format" => "mm-dd-yyyy"
But that changes both the way the date is displayed and how the value is formatted. I also have this in my JS:
$(this).datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
pickTime: false
});
I'm not really sure what the format part is doing, but changing it doesn't change the value that is created by the input.

When I am faced with such a problem, where I want data displayed differently than I want it communicated, I usually write a short script to copy the value into a hidden element where I maintain the 'correctly'-formatted data which the user does not see.
This is the best solution I can offer at the moment, as I do not know of any way to convince the Bootstrap Datepicker to use two formats simultaneously.

there's a solution from bootstrap for this problem.
as said on the docs
you can set format as an object with 2 parsing functions: toValue and toDisplay.
$('.datepicker').datepicker({
format: {
/*
* Say our UI should display a week ahead,
* but textbox should store the actual date.
* This is useful if we need UI to select local dates,
* but store in UTC
*/
toDisplay: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() - 7);
return d.toISOString();
},
toValue: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() + 7);
return new Date(d);
}
},
autoclose: true
});

here is example script to copy the value into a hidden element to maintain yyyy-mm-dd format :
$('.datepicker').on('changeDate', function(e){
var date = e.date;
var day = ('0' + date.getDate()).slice(-2);
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var year = date.getFullYear();
console.log(year + '-' + month + '-' + day);
$(this).next('input[type=hidden]').val(year + '-' + month + '-' + day);
});

I wanted to use the default date pickers in Chrome, FF, Edge, and Safari. In particular, I wanted the scrolling behavior on the phone.
I set the input type to "date" and pass in the value as yyyy-mm-dd. This works great on Chrome, FF, Edge, and Safari. Automatically gets formatted as mm/dd/yyyy except in Safari, which shows longer format.
IE doesn't support the "date" type. So, when I pass the data into the "date" textbox, it needs to be converted manually to mm/dd/yyyy format and then I use the bootstrap datepicker.
So I test for IE. Then, if it is, do the transformation in the val()
// Format the values to be mm/dd/yyyy
ElementsJQ.val(function (index, value) {
// Check for a date value
let testDate = new Date(value);
if (isNaN(testDate.getMonth())) {
$(this).attr('value', '');
return '';
}
// Parse the value to get its parts
let dateParts_ = value.split('-');
if (dateParts_.length != 3) {
$(this).attr('value', '');
return '';
}
// Create formatted date
let formattedDate = dateParts_[1] + '/' + dateParts_[2] + '/' + dateParts_[0];
// Test - real date?
testDate = new Date(formattedDate);
if (isNaN(testDate.getMonth())) {
$(this).attr('value', '');
return '';
}
$(this).attr('value', formattedDate);
return formattedDate;
});
// Apply bootstrap date picker.
ElementsJQ.datepicker();
}

JQuery datepicker return weeknumber and day of week

Im trying to get the weeknumber and the name/shortcut of the weekday according to the chosen date through a JQuery calendar.
Im not really proficient in JQuery so i can get the weeknumber, but i cant seem to get the name of the day with it.
Could anyone help me out?
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
$('#weekNumber').val($.datepicker.iso8601Week(new Date(dateText)));
}
});

you have to get the date, than extract the name of the day from it:
var date = $(this).datepicker('getDate');
alert($.datepicker.formatDate('DD', date));
hope it helps!
edit: you can find the working fiddle here.

You can add in your existing block to grab the day name, by using the format date syntax, found in the datepicker documentation, here:
http://api.jqueryui.com/datepicker/#utility-formatDate
In this case, full day name is obtained from 'DD', so your updated code might look like:
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
var d = new Date(dateText);
$('#weekNumber').val($.datepicker.iso8601Week(d));
$('#dayName').val($.datepicker.formatDate('DD', d));
}
});
Fiddle here: http://jsfiddle.net/duffmaster33/zL6m2wck/

Here is alot of information on how to use the javascript Date object.
Here is the code I suggest you:
$(function() {
$( "#datepicker" ).datepicker({
onSelect: function( dateText, dateObj ){
//You can get your date string that way
console.log(dateText);
//You can get a few value about the date, look in your console to see what you can do with that object
//i.e. - console.log(dateObj.selectedDay)
console.log(dateObj);
//You can see the result of the date in string that way
$('.string').append(dateText);
currDate = new Date(dateText);
//You can have a complete Date object using the Date javascript method
console.log(currDate);
//The Date object in javascript provides you all you need then
//Get the number of day in a week, from 0(Sunday) to 6(Saturday)
$('.getday').append(currDate.getDay());
//Create a function to see day Sun - Sat
function getWeekDay(date) {
var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
return days[ date.getDay() ]
}
//Then we use it
$('.getweekday').append(getWeekDay(currDate));
}
});
});
You can see my fiddle there:
https://jsfiddle.net/qapw32Lp/
Here is a great source of information you can use also abotu the Date Object:
http://javascript.info/tutorial/datetime-functions

Javascript Date format not working with GetDay

I am using a jquery datepicker and i had an option box being populated with info depending on what day it was..
Worked perfectly...
$('#bydate').datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
beforeShowDay: unavailable,
minDate: -0,
dateFormat: "dd/mm/yy",
onSelect: function(e) {
var date = new Date(e);
var day = date.getDay(); // 0 = sunday etc...
// clean all the options
$("#duration").empty();
// if monday
if (day === 1) {
// add "5 days" options
$("#duration").append("<option value='5'>5 days</option>");
// else if friday
} else if (day === 5) {
// add 3 / 7 / 14 days options
$("#duration").append("<option value='3'>3 days</option>"
+ "<option value='7'>7 days</option>"
+ "<option value='14'>14 days</option>");
} else { // else...
}
}
Until i came to needing to change the format from mm/dd/yy to dd/mm/yy.
Now it doesn't work, it looks like getDay is getting the month number and trying to calculate the day number...
I need date to know its dd/mm/yy or getDay to know that I am using dd/mm/yy
example here http://offline.raileisure.com/

The problem is that you changed the format of how the datepicker shows the dates, but not the one of the constructor Date(). You can do this:
onSelect: function(e) {
e = e.split('/')[1] + '/' + e.split('/')[0] + '/' + e.split('/')[2];
var date = new Date(e);
...

You can also use the datepicker's parseDate function, which takes the date format as parameter. See http://docs.jquery.com/UI/Datepicker/parseDate for details

jQuery datepicker minDate variable

I'm usung the jQuery datepicker. In my "EndDate" textbox I'd like to use the date selected from the the "StartDate" textbox + 1. How do I do this?
I tried this but didn't work. In my start date code I had...
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
Then in my end date code I had...
minDate: testm,
but the end date still made all the days for the month available.
Edit. I'm curious as to why this doesn't work. In my start date datepicker I have this..
onSelect: function (dateText, inst) {
test = dateText
}
Why can't I come down into my end date datepicker and say, minDate: test?
Edit. Still not working
$(".dateStartDatePickerBox").datepicker({
minDate:'-0d',
onSelect: function(dateText, inst)
{
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
$("#dateEndDatePickerBox").datepicker("option", "minDate", testm);
}
});
$(".dateEndDatePickerBox").datepicker({
onSelect: function()
{
}
});

You'll need to set the min date dynamically on the change event of the start date.
Something like:
$("#startDate").change(function() {
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
$("#endDate").datepicker("option", "minDate", testm);
});
Answer to the edit:
You cannot do the following:
var test;
$("#myinput").datepicker({
onSelect: function() { test = $(this).datepicker("getdate"); }
});
$("#myotherinput").datepicker({
minDate: test
});
Test is uninitialized at the time that minDate is being set on myotherinput. The process of setting the minDate doubtless requires DOM manipulation which datepicker manages on initialization or when "option" is called. Simply changing the variable that was used for initialization does not effect the already initialized datepicker.

Are you talking setting a max selection date?
StartDate = new Date("March 20, 2010");
EndDate = new Date("March 21, 2010");
$("#datepicker").datepicker({ minDate: StartDate, maxDate: EndDate, defaultDate: StartDate });
Note the maxDate? That won't let you select any days past it ...

The API documentation for the date picker does seem to say it should take a Date object, but I've had this exact problem in the past and this is how I solved it.
Pass minDate an offset, instead of a date. You'll need a function to take your start date, add one to it and then get the offset from today. So you could have a function like:
function offsetFromToday( someDate ) {
// clear time offset because we only want to take date into account
someDate.setHours( 0 );
someDate.setMinutes( 0 );
// The number of milliseconds in one day
var ONE_DAY = 1000 * 60 * 60 * 24;
// Convert both dates to milliseconds
someDate = someDate.getTime();
var today = new Date().getTime();
// Calculate the difference in milliseconds
var difference = Math.abs( someDate - today );
// Convert back to days and return
return Math.floor( (difference / ONE_DAY) + 1 );
}
So you just need to get your start date a day ahead: StartDate.setDate( StartDate.getDate() + 1 ) or similar, and then pass it to this function to get an offset, then give that to minDate.