Jquery UI Datepicker altField input not working - javascript

I have two inputs with datepicker, I need that first datepicker can initialize another, this works great with altField, but the datepicker from the second input does not work anymore. I make a example with this data:
https://jsfiddle.net/5njLoxd5/
<input type="text" id="lightBillingStartdate" /><br/>
<input type="text" id="lightBillingFinishDate" /><br/>
$( "#lightBillingStartdate" ).datepicker({
altField: "#lightBillingFinishDate",
altFormat: "dd/mm/yy",
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingFinishDate").datepicker("option","minDate", selected);
}
});
$( "#lightBillingFinishDate" ).datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingStartdate").datepicker("option","maxDate", selected);
}
});

I would use setDate method like so: https://jsfiddle.net/Twisty/5njLoxd5/2/
$("#lightBillingStartdate").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingFinishDate").datepicker("option", "minDate", selected);
$("#lightBillingFinishDate").datepicker("setDate", selected);
}
});
$("#lightBillingFinishDate").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingStartdate").datepicker("option", "maxDate", selected);
}
});

Related

jQuery UI Datepicker weird behavior shows weird icons

i have a weird behavior with date picker , and not reprduce for all computers,
the problem after select date from start date and then try to select from the end date , for some computers there additional arrow icons that appear in the date picker.
picture attached.
now the problem didn't reprduce for all , also it reprduce when get the minDate or maxDate related if you in start or end date
i've tested the issue on two computers that have a same os and browser versions but it reproduced on one of them
var from = $(".from", container).datepicker({
defaultDate: defaultDate,
dateFormat: "dd-M-yy",
changeMonth: true,
numberOfMonths: 3,
showOn: "both",
buttonImage: "/resources/images/forms/calendar-regular.png",
buttonText: "Start Date",
minDate : minDate,
maxDate: -1,
onClose: function (selectedDate) {
$(".to", container).datepicker("option", "minDate", selectedDate);
if (!$(".to", container).val()) {
$(".to", container).datepicker('setDate', selectedDate);
}
}
});
var to = $(".to", container).datepicker({
defaultDate: defaultDate,
dateFormat: "dd-M-yy",
changeMonth: true,
numberOfMonths: 3,
showOn: "both",
buttonImage: "/resources/images/forms/calendar-regular.png",
buttonText: "End Date",
minDate: minDate,
maxDate: 0,
onClose: function (selectedDate) {
$(".from", container).datepicker("option", "maxDate", selectedDate);
}
});
},
i'm using jquery-ui-1.9.1.js

Jquery datepicker with angular returns undefined

In one Form I'm developing using angular, i use two datepickers
<td><input ng-model="reportsVal.start_date" type="text" id="startDatePicker" ng-disabled="showVals"></td>
<td><input ng-model="reportsVal.end_date" type="text" id="endDatePicker" required ng-disabled="showVals"></td>
$( "#startDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "Start Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
numberOfMonths: 1
});
$( "#endDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "End Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday
});
on submit when i console log reportsVal.start_date and reportsVal.end_date it comes as expected. But when i use end_date must be greater than start_date condition like below
$( "#startDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "Start Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
numberOfMonths: 1,
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
}
$("#endDatePicker").datepicker("option","minDate", date)
}
});
$( "#endDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "End Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
}
$("#startDatePicker").datepicker("option","maxDate", date || 0)
}
});
i'm getting undefined for these values reportsVal.start_date and reportsVal.end_date

JQuery UI Datepicker: auto-popup return date on selection of departure date

I have two input fields on which the user can specify departure and return dates.
I am trying to implement a situation where when the user selects a departure date, the datepicker automatically pops up on the return date.
Below is what I have at the moment, which is not working.
The HTML:
<input id="departure-date" type="text">
<input id="return-date" type="text">
The (JQuery) Javascript:
$(function() {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function(){
this.val(date.toLocaleDateString());
$('#return-date').focus();
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function(){
this.val(date.toLocaleDateString());
})
});
});
Any ideas on how I can get this to work will be much appreciated.
You could try something like
$(function() {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function(date) {
setTimeout(function() {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function(date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<input id="departure-date" type="text">
<input id="return-date" type="text">
Demo: Fiddle
You don't need to set the value of the datepicker whenever value changes.
$(function() {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function(){
$('#return-date').focus();
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function(){
})
});
});

jQuery datepicker - storing the date in a variable and printing it

Since I am new to jQuery I have a simple question to the pro-users.
How do I print out on the screen the date from the datepicker?
How to assign the date from datepicker to a variable so I can use it later for using that date's with mySQL database manipulation.
Any help appreciated.
$(function() {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
dateFormat: "yy/mm/dd",
showAnim: 'clip',
onClose: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1, maxDate: 0,
dateFormat: "yy/mm/dd",
showAnim: 'clip',
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
$( "#from" ).datepicker("getDate"); //to get the date
var date;
date = $( "#from" ).datepicker("getDate"); //to store it in a variable.
The API is useful if you need to do more with your datepicker.
http://api.jqueryui.com/datepicker/#method-getDate
you can use onSelect method to assign selected value to some variable. You can post that value to your controller and save it to database.
$(function() {
var selectedDate = "";
$("#from").datepicker( {
onSelect: function(date) {
alert(date);
selectedDate = date;
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1
});
});
Use
getDate
it Returns the current date for the date picker or null if no date has been selected.
var fromDate= $( "#from" ).datepicker( "getDate" );
var toDate= $( "#to" ).datepicker( "getDate" );

jquery datepicker set date to tomorrow's date

I have set the date for #arrival to todays date, but how can I set the #departure to tomorrow's date?
$(function() {
$( "#arrival" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function( selectedDate ) {
$( "#departure" ).datepicker( "option", "minDate", selectedDate);
}
});
$(function() {
$("#arrival").datepicker("setDate", "0");
});
$( "#departure" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$(function() {
$("#departure").datepicker("setDate", "1");
});
});
I have customized the datepicker and it works fine.
In the change function of the first datepicker, create a date object, set the date one day forward, and set the date of the second datepicker to that date. You can use minDate to make sure any date earlier than the set date can not be picked.
$(function () {
$("#arrival").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function (selectedDate) {
var myDate = $(this).datepicker('getDate');
myDate.setDate(myDate.getDate()+1);
$('#departure').datepicker('setDate', myDate);
}
});
$("#departure").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$("#arrival").datepicker("setDate", "0");
$("#departure").datepicker("setDate", "1");
});
FIDDLE

Categories