We Keep Coding

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

I want this date picker to choose dates from years between 1990 to 2000

Can someone help me correct this code. I want to pick dates that are between the years 1990 and 2000 only without allowing other dates like the ones in future to be selected.
<script>
$(document).ready(function(){
$( "#EmpBirthdate" ).datepicker({
dateFormat: 'yy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "-30"
});
});
</script>

$(function () {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeMonth: true,
changeYear: true,
yearRange: '1999:2012',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: new Date(1999, 10 - 1, 25),
maxDate: '+30Y',
inline: true
});
});
Just added year range option. It should solve the problem

You can use the min max attributes
Min Max
$( "#datepicker" ).datepicker({ minDate: value1, maxDate: value2 });

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 altField input not working

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);
}
});

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" );