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
Related
This question already has answers here:
How do I pre-populate a jQuery Datepicker textbox with today's date?
(19 answers)
Closed 2 years ago.
Anyone here how do I display today's date in jquery datepicker? Tried these but it doesn't display today's date in datepicker.
$('#from').datepicker({
defaultDate: new Date(),
dateFormat: 'yy-mm-dd',
onSelect: function () {
table.draw();
},
changeMonth: true,
changeYear: true
});
$('#to').datepicker({
defaultDate: new Date(),
dateFormat: 'yy-mm-dd',
onSelect: function () {
table.draw();
},
changeMonth: true,
changeYear: true
});
You can use setDate like below.
$("#from").datepicker().datepicker("setDate", new Date());
$('#from').datepicker({
defaultDate: new Date(),
dateFormat: 'yy-mm-dd',
onSelect: function() {
//table.draw();
},
changeMonth: true,
changeYear: true
});
$("#from").datepicker().datepicker("setDate", new Date());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input type="text" id="from" />
You can set the default date via
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
see: https://api.jqueryui.com/datepicker/#method-setDate
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 });
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
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" );
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