I have the following code:
$.ajax({
url: 'my_url',
type: 'GET'
}).done(function(data){
availableDates = data;
var min = availableDates[0].split('-');
var max = availableDates[availableDates.length - 1].split('-');
var minDate = new Date(min[0], min[1] - 1, min[2]);
var maxDate = new Date(max[0], max[1] -1, max[2]);
$('#id_date').datepicker({
beforeShowDay: available,
minDate: minDate,
maxDate: maxDate,
});
}).fail(function(){
console.log('some message');
});
It sets the minDate, maxDate and the available dates. All that works fine on the first go. After making the AJAX call again, I get different dates so I have to change the minDate and the maxDate.
The maxDate changes as expected, but the minDate changes only if the new minDate is later than the original minDate. It won't change to a day in the past in regards to the previous minDate.
Any ideas?
Why are your re-initializing the date picker
instead do following:
$( "#id_date" ).datepicker( "option", "minDate", minDate );
$( "#id_date" ).datepicker( "option", "maxDate", maxDate );
Related
In my app I have a form with 3 datepicker objects; from, to, and apply_to. I tried in JavaScript to set the control input to and apply_to
$("#from").datepicker({
dateFormat: 'dd.mm.yy',
onSelect: function(selected) {
$("#to").datepicker("option","minDate", selected);
$("#apply_to").datepicker("option","maxDate", selected)
}
});
But I need to set maxDate in apply_to to the selected date minus one.
$("#apply_to").datepicker("option","maxDate", selected-1d)
But my code is not working.
In your onSelect, the selected parameter is a string so you must first convert it to a javascript date object, then subtract one day using setDate / getDate, and finally update the corresponding datepicker maxDate option
onSelect: (selected) => {
var pieces = selected.split('.');
var dt = new Date(pieces[2], parseInt(pieces[1])-1, pieces[0]);
dt.setDate(dt.getDate() - 1);
$("#to" ).datepicker( "option", "maxDate", dt);
}
I'm using two jQuery datepickers, with disabled dates based on a generated array. When I put the $("#date") datepickers after the $('input') one, that works fine. However, I also need a mindate set to today, and a maxDate set to 1 year after that; it works when the order is the other way around. How can I manage to make them both work?
$(function() {
var array=[]; //disabled dates for the beforeShowDay go here
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
}
});
$( "#date" ).datepicker({
dateFormat: 'yy-mm-dd',
minDate: new Date(),
maxDate: '+1y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#date1").datepicker( "option", "minDate", endDate );
$("#date1").datepicker( "option", "maxDate", '+1y' );
}
});
$("#date1").datepicker({
dateFormat: 'yy-mm-dd',
});
});
I would not try to apply two selectors ('input' and '#date') on the same DOM element because the second can override what the first configured. If you would like that both datepickers share the same beforeShowDay function you can declare it once and assign it to each datepicker.
It is not totally clear to me what you want to achieve. But maybe the following approach with a common beforeShowDay function could help. In any case the example below will show you how to insert a JSFiddle including datepicker into your question to clarify what you want.
$(function() {
var array=['2016-12-08']; //disabled dates for the beforeShowDay go here
var beforeShowDay = function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
};
$( "#date" ).datepicker({
beforeShowDay: beforeShowDay,
dateFormat: 'yy-mm-dd',
minDate: new Date(),
maxDate: '+1y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#date1").datepicker( "option", "minDate", endDate );
$("#date1").datepicker( "option", "maxDate", '+1y' );
}
});
$("#date1").datepicker({
beforeShowDay: beforeShowDay,
dateFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="date">
<input id="date1">
I went through many examples but Im not able to set the value of my date picker. The textbox value is shown as 01/01/2016 and the calendar opens to that date as well. Im trying to set the default date to two days from now in the text box as well as in the calendar that shows up on click.
I tried the following:
1.
$(".date-picker").datepicker().datepicker("setDate", new Date());
2.
$(".date-picker").datepicker().datepicker('setDate', '+2');
My HTML is:
<input type="text" class="input date-picker">
I agree this question has been repeated lots of times but I have tried most of the examples but still Im not able to make it work. Please advice.
The best way to do this is to extend the javascript date function using prototype
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Then simply call as follows:-
$(function() {
var currentDate = new Date();
var myDate = currentDate.addDays(2);
$(".date-picker").datepicker(); //initialise
$(".date-picker").datepicker('setDate', myDate); //set date
});
DONT FORGET you have to INITIALISE the datepicker - then set the date
JS Fiddle here
Initialize a datepicker with the defaultDate option specified.
$(document).ready(function () {
$(".date-picker").datepicker({
defaultDate: +2,
dateFormat: "mm/dd/yy"
});
});
http://jsfiddle.net/8ejbw8d5/
$( ".date-picker" ).datepicker({
defaultDate: +2
});
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +2 );
Read more here: http://api.jqueryui.com/datepicker/#option-defaultDate
I've read a lot of different answers to this, but I'm curious as to why my specific way of doing it (which I haven't found online) doesn't not render the desired results.
User selects deliverydate, after which pickupdate datepicker has a maxDate of 14 days from the deliverydate:
$( "#deliverydate" ).datepicker({
defaultDate: 1,
onClose: function( selectedDate ) {
$( "#pickupdate" ).datepicker( "option", "minDate", selectedDate, "defaultDate", selectedDate, "maxDate", (Date.parse(selectedDate) - Date.today())/1000/60/60/24 + 14 );
}
});
How I thought to run the calculation was calculate the number of days from today the selectedDate is and then add 14 (since maxDate can take an argument that's an integer representing the number of days from today).
Note I have Date.js
You can only use the datepicker("option", option, value) syntax for one single option. Since you are using multiple options for the $('#pickupdate') datepicker, you need to specify them as a JSON, as you did for $(#deliverydate). Like so:
$('#pickupdate').datepicker({
minDate: selectedDate,
defaultDate: selectedDate,
maxDate: ((Date.parse(selectedDate) - Date.today())/1000/60/60/24 + 14 )
});
See this JSFiddle for a working demonstration.
See also this Stack Overflow question about using jQuery Datepicker with multiple options.
Finally, you should consider changing to Moment.js. The last release of Date.js was 2007, so there hasn't been any major or minor releases to it for a long time.
OK after a ton of digging... ugh jQuery Datepicker is not doc'ed well.
Two important factoids:
1. Datepicker can only be initialized ONCE, thereafter in order to change the settings, you must use option
2. According to Datepicker, you should be able to provide multiple options in a map of option-value pairs, but nothing I do makes this work, and their docs looks just like single option, so ... whatever, I just set 3 options individually.
The way I got it to work is below:
$( "#deliverydate" ).datepicker({
defaultDate: 1, // 1 day from today
numberOfMonths: 1,
minDate: 0,
maxDate: <%= ENV["Days_in_advance"].to_i %>,
dateFormat: "M d, yy",
// despite the docs, it doesnt' look like you can set multiple options at once, so I'm doing it individually 3X below.
onClose: function( selectedDate ) {
deliverydate = Date.parse(selectedDate);
$( "#pickupdate" ).datepicker("option",
{ defaultDate: ((deliverydate - Date.today())/1000/60/60/24 + 1 ) });
// day after deliverydate
$( "#pickupdate" ).datepicker("option",
{ minDate: ((deliverydate - Date.today())/1000/60/60/24 ) });
// same day as deliverydate
$( "#pickupdate" ).datepicker("option",
{ maxDate: ((deliverydate - Date.today())/1000/60/60/24 + <%= ENV["Max_days_of_rental"].to_i %> )});
// upper limit on rental days
}
});
$( "#pickupdate" ).datepicker({
// this is triggered on DOM load and is overwritten the minute a deliverydate is selected per the onClose
defaultDate: 1, // 1 day from today
numberOfMonths: 1,
minDate: 0,
maxDate: <%= ENV["Max_days_of_rental"].to_i %>,
dateFormat: "M d, yy"
});
Please take a look at http://jsfiddle.net/4bML8/
Everything is working fine (i think) except the fact that the datepicker doesn't disappear when I pick a date. Can anyone tell me what is causing this?
You never declared the variable dates but you used it. Create a variable dates and check this code
var dates = $('#d_date, #a_date').datepicker({
numberOfMonths: 1,
minDate: +1,
dateFormat: 'd / m / yy',
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
If you want the datepicker to close after it enters a date, you need to tell it to move focus out of the current field. I do it this way:
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
firstDay: 1,
changeMonth:true,
changeYear: true,
onClose: function(dateText, inst) {
$(this).focus(); //set focus and then move to next field so validator will fire
$(this).focusNextInputField(); //causes datepicker to close
}
});