Default JQuery UI datepicker to first available date in collection - javascript

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.

Related

jQuery UI datepicker - How to use dateFormat for dates inside the code?

I want to manipulate with some dates in my datepicker calendar, I just don't know how can I write the dates in the date format that I want. When I use dateFormat in my code it won't work.
My answer probably lies here somewhere but I can't figure it out where to use it in my code.
http://api.jqueryui.com/datepicker/#utility-formatDate
http://api.jqueryui.com/datepicker/#option-dateFormat
My code:
<script>
jQuery(function($) {
$(document).ready(function(){
var sesa1 = new Date(2019, 05, 04); // I want to write this dates in dd-mm-yy format
var sesa2 = new Date(2019, 06, 06); // They curently work in yy-mm-dd format
$(".picker").datepicker({
//dateFormat: 'dd-mm-yy' , // If I uncoment this line the defaultDate will go in year 2024!
defaultDate: '05/07/2019', // It works in format mm-dd-yy and I want it to be in dd-mm-yy
beforeShowDay: function (date) {
var day = date.getDay();
if (date >= sesa1 && date <= sesa2) {
return [(day != 0 && day != 1 ) ? true : false, 'green', 'some text'];
}
return [true, "", "sometext"];
}
});
});
defaultDate
Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
Since your default date is not presented in the proper format, it is not read right.
jQuery(function($) {
$(function(){
var sesa1 = new Date(2019, 05, 04);
var sesa2 = new Date(2019, 06, 06);
$(".picker").datepicker({
dateFormat: 'dd-mm-yy',
defaultDate: '07-05-2019',
beforeShowDay: function (date) {
var day = date.getDay();
if (date >= sesa1 && date <= sesa2) {
return [(day != 0 && day != 1 ) ? true : false, 'green', 'some text'];
}
return [true, "", "sometext"];
}
});
});
});
Also if you need to make a Date from a string, try using $.datepicker.parseDate().
$.datepicker.parseDate( format, value, options )
Extract a date from a string value with a specified format.
This way, if you can have date strings that are different formats, you can get a Date object regardless. To reverse it, use $.datepicker.formatDate( format, date, options ).
Hope that helps.

Date Picker Disabled Specific Date and Future date

How will I disable specific date together with future date? I tried this code but only the specific date is working.
var array = ["2017-10-07","2017-10-08"]
$('#INVOICE_TRANSACTIONDATE').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
maxDate: 0
}
});

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

Date is interpreted as being in a different format

My code :
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
alert("DateText=>"+ dateText + "," + "DATE =>" + d);
$('#calendar').fullCalendar('gotoDate', d);
}
});
})
My error :
My problem is that the function is being passed dateText from fullCalendar in the form dd/mm/yyyy...it is then creating a new date using this and it is messing it up, thinking that the date should be in the form mm/dd/yy. Can anyone help me fix this please?
You are alerting the dateText but passing a date object to calendar. Look at FullCalendar API for format of 'gotDate' argument. You can use
d.getFullYear(), d.getMonth() and d.getDate() to convert
Try this,may be it will little helpfull for you
var date = $('#datepicker').datepicker({ dateFormat: 'mm-dd-yy' });
If you're looking to format the date. Try date format
edit:
maybe your date variable is wrong. Try
<div id="datepicker"></div>
var date = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('mm-dd-yy', date);

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

Categories

Resources