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.
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 am using the jquery ui datepicker with select date range. I know that by default it already set if the from picks a date then the to date can not pick any date before the from date picked. I also checked the minDate and maxDate documents but I still couldn't try figuring it out.
I want to keep the default setting it has which is after date from is chosen date to cannot be before the from date vise versa but also want to add another restriction which is both datepickers have a maxDate of 0 which is today. None of them can be picked pass today.
This is pretty much just the standard.
$( "#date-from-field" ).datepicker({
onClose: function( selectedDate ) {
$( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date-to-field" ).datepicker({
onClose: function( selectedDate ) {
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate );
}
});
I tried adding these two but none of them works though
$( "#date-from-field" ).datepicker({maxDate: "0"});
$( "#date-from-field" ).datepicker({maxDate: "+0m +0w"});
but none of them work though.
Thank you in advance.
Alright so pretty much you need to check if the selectedDate is empty when date-to-field is updated and make the maxDate to "0". Once you do it should act as you wanted, it'll set the max to today's date or if the date of the from if it's not todays date. Here's a codepen that works for me - CodePen.
$("#date-from-field").datepicker({
onClose: function( selectedDate ) {
$( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
},
maxDate: "0"
});
$("#date-to-field").datepicker({
onClose: function( selectedDate ) {
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? selectedDate: "0" );
},
maxDate: "0"
});
EDIT
Updated the CodePen a bit more so that it checks if the selected date is greater than todays date.
$("#date-to-field").datepicker({
onClose: function( selectedDate ) {
var possibleDate = new Date(selectedDate);
possibleDate = (possibleDate < new Date())?possibleDate: new Date();
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? possibleDate: "0" );
},
maxDate: "0"
});
You can refer to this link : http://api.jqueryui.com/datepicker/#option-maxDate
This is to Initialize the datepicker with the maxDate option specified, not to set it up afterwards:
$( ".selector" ).datepicker({
maxDate: "+1m +1w"
});
To modify/get the option, use this:
Get or set the maxDate option, after initialization:
// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );
"+0" is for now()
Same for mindate!
This is the script I am using. What changes to be done?
$( "#from" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
$( "#to" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
I fixed it :-
Have to add this code in $( "#from" ).datepicker
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "maxDate", selectedDate
Have to add this code in $( "#to" ).datepicker
onSelect: function( selectedDate ) {
$( "#toDateRange" ).datepicker( "option", "minDate", selectedDate
Do:
var today = new Date();
var yesterday = new Date(today.getFullYear(),today.getMonth(),today.getDate()-1)
then add below property in your to date picker function
minDate : yesterday
Here is complete to code for that
var dateToday = new Date();
$(".datefrom" ).datepicker({
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onClose: function( selectedDate ) {
$( ".dateto" ).datepicker( "option", "minDate", selectedDate );
},
onSelect: function(selectedDate) {
var option = this.class == "datefrom" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
}
});
$(".dateto" ).datepicker({
dateFormat: 'dd/MM/yyyy',
onClose: function( selectedDate ) {
$( ".datefrom" ).datepicker( "option", "maxDate", selectedDate );
}
});
$('.datefrom,.dateto').change(selector)
It will disable the previous date in from calender and according to the selection done in from calender the to calender will get updated automatically and disabled previous date..
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) {
...
}
}
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