I have 2 jquery datepickers to select a date range.
Once I have selected a from date (from the first datepicker), I would like to activate the second (to) datepicker.
The code below does that, but for some reason closes the datepicker straight away.
Any ideas? - http://jsfiddle.net/rN4zu/
From <input type="text" id="dateFrom" />
To <input type="text" id="dateTo" />
jQuery
$( "#dateFrom" ).datepicker({
minDate: 0,
maxDate: "+2Y",
showWeek: true,
weekHeader: 'Wk',
onSelect: function( selectedDate ) {
$( "#dateTo" ).datepicker("option", "minDate", selectedDate ).focus();
}
});
$( "#dateTo" ).datepicker({
maxDate: "+2Y",
showWeek: true,
weekHeader: 'Wk'
});
http://jsfiddle.net/8YTKR/
The problem has to do with commands ramping up against each other. The set min date command and .focus are happening at the same time, which is causing the problem.
Ok, so first of all .focus is not the preferred way of triggering a datepicker. The preferred way is to use the datapicker show method which looks like this .datepicker('show');. So in this example we are going to use that instead.
Next we need to make sure that 'show' occurs AFTER the min date command. And because that command has no callback I am going to use setTimeout
$( "#dateFrom" ).datepicker({
minDate: 0,
maxDate: "+2Y",
showWeek: true,
weekHeader: 'Wk',
onSelect: function( selectedDate ) {
$( "#dateTo" ).datepicker("option", "minDate", selectedDate );
setTimeout(function(){
$( "#dateTo" ).datepicker('show');
}, 16);
}
});
$( "#dateTo" ).datepicker({
maxDate: "+2Y",
showWeek: true,
weekHeader: 'Wk'
});
Why 16ms you say? Because its the longest delay possible without it showing up on screen. 16ms is the default jquery animate interval for this very reason.
$( "#dateTo" ).datepicker("option", "minDate", selectedDate ).focus(0);
my suggestion would be to allow the user to pick any date that they would like in either datepicker, then do a validation on both text boxes after the dates are chosen.
The problem with setting the date range in the second datepicker from the value in the first datepicker is if a user chooses , say July 21 by accident, then the second date picker will start at July 21 , but then when they go to change the first date picker to July 1 , the second date picker will be stuck at dates after July 21
Related
Having a problem with the datepicker: when I click on a date, the datepicker works as it should but the form field empties itself of even any current content and remains empty until reloaded or a new entry is selected.
Before this stopped working and only on this one form, all the work I had been doing was elsewhere on the site and in PHP rather than Javascript so I don't even know where to begin and nothing shows in the Apache logs either. There is no other Javascript on this page so what I need to know is how to check for conflicts when there are no errors.
Just to be sure that the code itself looks okay, here it is:
The Javascript that is in an external js file:
$(document).ready(function(){
$( "#StartDate" ).datepicker({
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate ) {
$( "#StartDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#EndDate" ).datepicker({
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate ) {
$( "#EndDate" ).datepicker( "option", "maxDate", selectedDate );
}
});
$( "#datepicker" ).datepicker({
altField: '#datepicker',
altFormat: 'yy-mm-dd',
dateFormat: 'D M d, yy',
firstDay: 1,
onClose: function( selectedDate ) {
$( "#datepicker" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
The form field itself:
<input type="text" name="EventDate" value="Fri Jan 11, 2019" size="15" id="datepicker">
. . .and the form is having issues with the one called datepicker. The other two are working prefectly on another form which has two datepickers.
Somehow the problem in my original question was something in the OnLoad bits and with it removed from the last section that wasn't working, it worked but then the other two did not so removing all of them it worked fine. There must be some syntax error or other in it.
In any event, it is now fixed properly. Once I realized what #ArtisticPhoenix meant by class I was able to implement it to simplify the code considerably and to make it work with any form no matter how many datepickers they may have. I now have this:
$(function() {
$('input').filter('.datepicker').datepicker({
altFormat: 'yy-mm-dd',
dateFormat: 'yy-mm-dd',
firstDay: 1
});
});
The form itself in this case is semi-dynamic, meaning that it's created from an array of values found in a definition function so simply changing the definition was all that was needed to make it work properly throughout several sites. Now the id is simply the field name and class is always datepicker. Seems to work perfectly so far!
<input type="text" name="EventDate" value="2019-01-11" size="15" id="EventDate" class="datepicker">
I have a working range selection using the basic Jquery UI date range from the UI website.
HTML
<button id="week">Past Week</button><br />
<label for="from">From</label>
<input type="text" id="from" name="from" value"">
<label for="to">to</label>
<input type="text" id="to" name="to" value"">
JQ
$( "#from" ).datepicker({
defaultDate: "+1w",
dateFormat: 'MM d, yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
dateFormat: 'MM d, yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
I also need to include a button for automatically selecting the previous 7 days from the current date. I've used the new Date(); method to achieve a 'working' version (no date formating at the moment).
$( "#week" ).click(function() {
var today = new Date();
var lastweek = new Date(new Date().setDate(new Date().getDate()-7));
$( "#from" ).val(lastweek);
$( "#to" ).val(today);
});
However I'd prefer to use the datepicker function to achieve the previous week range, and I cannot figure out how to achieve that (if its even possible). Primary reason being that if a user chooses the "Prev Week" button option, then selects a new date, I want the existing date to be selected on the calendar widget.
I have this in a jsfiddle http://jsfiddle.net/lopac1029/RuhWj/
Boom boom boom. Another related question was offered to me in the sidebar after posting, and I was able to use that as a basis to figure out this:
$( "#week" ).click(function() {
var today = new Date();
var from = new Date(today.getTime());
from.setDate(from.getDate() - 7);
$("#to").datepicker("setDate", today);
$("#from").datepicker("setDate", from);
});
jsfiddle updated
Thanks for always being there for me, stackoverflow.
I want to disable all the future dates after today in Jquery Ui Datepicker
Here is the Demo :
Code :
$( "#start_date" ).datepicker(
{
maxDate: '0',
beforeShow : function()
{
jQuery( this ).datepicker('option','maxDate', jQuery('#end_date').val() );
},
altFormat: "dd/mm/yy",
dateFormat: 'dd/mm/yy'
}
);
$( "#end_date" ).datepicker(
{
maxDate: '0',
beforeShow : function()
{
jQuery( this ).datepicker('option','minDate', jQuery('#start_date').val() );
} ,
altFormat: "dd/mm/yy",
dateFormat: 'dd/mm/yy'
}
);
Try this
$(function() {
$( "#datepicker" ).datepicker({ maxDate: new Date() });
});
Or you can achieve this using as below:
$(function() {
$( "#datepicker" ).datepicker({ maxDate: 0 });
});
Reference
DEMO
UPDATED ANSWER
This worked for me endDate: "today"
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
orientation: "top",
endDate: "today"
});
SOURCE
In my case, I have given this attribute to the input tag
data-date-start-date="0d"
data-date-end-date="0d"
You can simply do this
$(function() {
$( "#datepicker" ).datepicker({ maxDate: new Date });
});
JSFiddle
FYI: while checking the documentation, found that it also accepts numeric values too.
Number: A number of days from today. For example 2 represents two days
from today and -1 represents yesterday.
so 0 represents today. Therefore you can do this too
$( "#datepicker" ).datepicker({ maxDate: 0 });
Change maxDate to current date
maxDate: new Date()
It will set current date as maximum value.
In case you are appending Dtpicker,use the following code
$('#enddate').appendDtpicker({
"dateOnly": true,
"dateFormat": "YYYY-MM-DD",
"closeOnSelected": true,
maxDate: new Date()
});
//Disable future dates after current date
$("#datepicker").datepicker('setEndDate', new Date());
//Disable past dates after current date
$("#datepicker").datepicker('setEndDate', new Date());
Datepicker does not have a maxDate as an option. I used this endDate option. It worked well.
$('.demo-calendar-default').datepicker({
autoHide: true,
zIndex: 2048,
format: 'dd/mm/yyyy',
endDate: new Date()
});
maxDate: new Date()
its working fine for me disable with current date in date range picker
From researching on this site, I found a way to use 2 datepickers. If you pick a date on the first one, the second one will automatically show with the selected date as new minDate. You can see this in action on my test server here: http://www.zinius.nl/trips
The issue I'm having occurs in this situation:
Select the Check-in-date field, but don’t select a date and click somewhere else. You won’t be
able to get the Check-in-date field datepicker pop-up back up again until you refresh the entire page or first select the Check-out-date.
This is the code I am using:
$( "#datepicker1" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: 0,
firstDay: 0,
dateFormat: 'mm-dd-yy',
changeMonth: false,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
});
$( "#datepicker2" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: '+1d',
changeMonth: false,
firstDay: 0,
dateFormat: 'mm-dd-yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
}
});
I tried replacing the onClose with onSelect. This solves the issue, but when I select a date on datepicker1, datepicker2 appears and disappears in a flash.
Does anyone have a solution to get this working properly?
Thank you,
Guilliano
Try to change your onClose function on the first datePicker with
...,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
if(minDate){
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
}
Looking at the console, I can see this error being logged:
Cannot call method 'getDate' of null
It means your statement:
var minDate = $(this).datepicker('getDate');
is causing the problem. What you can do is to first check if the selectedDate (passed to the onClose callback) is valid or not, before attempting to getDate on it.
onClose: function(selectedDate) {
if (selectedDate) {
...
}
}
Click on the first field;
select any day; (then automatic opening second datepicker)
click next month button
showing datepicker has flash, but month not change
after this, next month button (and prev month button) have work.
WHYYYYYYY ?????
Fiddel Demo
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 2,
onClose: function(selectedDate) {
$(".to_date").datepicker("option", "minDate", selectedDate);
$(this).parents('.span2').next().children().find('.to_date').focus();
}
});
$(".to_date").datepicker({
minDate: '+1D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 2
});
I can confirm the bug, it has something to do with opening the second datepicker from the onClose function, adding a zero delay timeout seems to work though:
onClose: function(selectedDate) {
var $toDate = $(this).closest('.span2').next().find('.to_date');
$toDate.datepicker("option", "minDate", selectedDate);
setTimeout(function(){$toDate.datepicker('show')},0);
}
Updated fiddle
Note: I changed your code a bit, I optimized your .to_date selector and made it so only the corresponding input is updated with the selected date