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) {
...
}
}
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'm trying to implement the JQuery DatePicker w/ week no and returning the selected date in format YYYYMMDD. When looking into the api for how to format date it says this could be done by using dateFormat: "yy-mm-dd". However, I'm not able to return the date in specified format.
I'm able to return the date in 'original format' with this code:
$(function DatePicker() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var date = $(this).datepicker( 'getDate' );
alert(date);
( 'getDate' ).getDate();
},
showWeek: true,
//showOn:"button",
firstDay: 1
});
});
Here is my code for trying to return (show a pop up) wewith the format 'YYYYMMDD':
$(function DatePicker() {
$( "#datepicker" ).datepicker({
// dateFormat: 'yy-mm-dd',
onSelect: function() {
dateFormat: 'yy-mm-dd',
//var dateFormat = $(this).datepicker( "option", "dateFormat" );
//$.(this).datepicker("option", "dateFormat", "yy-mm-dd"); //Senast insatt
alert(dateFormat);
},
showWeek: true,
firstDay: 1
});
});
Obviously I'm new to JQuery, and fairly new to JavaScript as a language.
Thanks!
Check this:
$( "#datepicker" ).datepicker({
dateFormat: 'yymmdd',
onSelect: function(v){
alert(v);
},
showWeek: true,
firstDay: 1
});
Test code here: http://codepen.io/anon/pen/yOBwLo
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..
i am trying to get multiple date inputs. What i want to do is that when user selects first date then he should not be able to select the same date + the dates previous then selected date in the second text box. here is my code.i am new to this. Not good at jquery ui
<script>
$(function() {//alert("getPricing just got called");
$( "#datepicker" ).datepicker({beforeShowDay: $.datepicker.noWeekends, dateFormat: 'yy-mm-dd',minDate: 0 });
//Date d1=new Date($("#datepicker").val());
$( "#datepicker1" ).datepicker({beforeShowDay: $.datepicker.noWeekends, dateFormat: 'yy-mm-dd',minDate: 0});
});
$("#button").submit(function() {alert("getPricing just got called");
var start = $('#datepicker').datepicker('getDate');
var end = $('#datepicker1').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
alert(days);
});
</script>
now what i want is that user can not select the same date+previous dates (which is selected in #datepicker) at #datepicker1
Demo,try this,
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: 'yy-mm-dd',
beforeShow: function() {
$('.datepicker').datepicker('option', 'maxDate', $('#end_date').val());
}
});
$( "#datepicker1" ).datepicker({
beforeShowDay: $.datepicker.noWeekends,
dateFormat: 'yy-mm-dd',
beforeShow: function() {
$(this).datepicker('option', 'minDate', $('#datepicker').val());
}
});
I'm using jQuery UI Datepicker to make a two field submission form. I want the user to create a range and submit it to see results. However, they obviously cannot pick a start date that happens more recently than an end date (you can't see a range starting today and going to yesterday).
As of now, I've been able to put an alert on selection of the second one if the first one happened before it, but I can't figure out how to have the datepicker stay open so the user can select something else.
Here is the code I have so far:
<script>
$(document).ready(function() {
$(".datepicker_start").datepicker({
maxDate: '+0d',
onSelect: function(dateText, inst) {
}
});
$(".datepicker_to").datepicker({
maxDate: '+0d',
onSelect: function(dateText, inst) {
var startDate = $('.datepicker_start').val();
$(this).attr('value', dateText)
if (startDate > dateText) {
alert('not cool!');
}
}
});
});
</script>
Does anyone know how I'd do this? I tried returning false but it still pushes the incorrect date to the field :(
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate);
}
});
});
From: http://jqueryui.com/demos/datepicker/date-range.html
$(function () {
$("#fromdate").datepicker({
onClose: function (selectedDate) {
$("#todate").datepicker("option", "minDate", selectedDate);
}
});
$("#todate").datepicker({
onClose: function (selectedDate) {
$("#fromdate").datepicker("option", "maxDate", selectedDate);
}
});
});