This question already has answers here:
Can I make the jQuery datepicker display more year when using the changeYear option?
(2 answers)
Closed 5 years ago.
I'm trying to use jQuery-UI's datepicker to select a birthday, however it only allows me to go back 10 years, i.e. I cannot have users that are older than 10 years :)
I tried to set the minDate as follows:
<script>
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
//minDate: "-100Y",
minDate: new Date(1971, 2 - 1, 26),
maxDate: "+1D" // this works.
});
} );
</script>
However I couldn't manage to make it work, the earliest possible selection is always 2007. -How- can I go further back?
Thanks,
It does go further back, it's just that the dropdown for years is limited to ten years by default.
You can set this using the yearRange option
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
//minDate: "-100Y",
minDate: new Date(1971, 2 - 1, 26),
maxDate: "+1D",
yearRange: '1971:2017',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="datepicker"></div>
You can use YearRange...
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
//minDate: "-100Y",
minDate: new Date(1950, 2 - 1, 26),
maxDate: "+1D" // this works.
});
Related
So I am working on a project for my classes and I had to set minimum and maximum date for two inputs. First one is being set from now to 12 months from now, and the other was meant to be set from date which was picked in the first input field to 12 months from now.
<p>From: <input type="text" id="dateFrom"></p>
<p>To: <input type="text" id="dateTo"></p>
this is my JS
var chosenDate = document.getElementById("dateFrom").value;
$( function() {
$("#dateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: '12M',
minDate: '0',
});
})
$( function() {
$("#dateTo").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: '12M',
minDate: chosenDate,
});
})
On the preview in a browser it works only for last session. How can I fix this?
you have to use change event on #dateFrom, so whenever the value of the input is changed,the minDate property of the datepicker event get the current input value
of #dateFrom
$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});
the final code should be like this:
var chosenDate = document.getElementById("dateFrom");
$(function() {
$("#dateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: "12M",
minDate: "0"
});
});
$(function() {
$("#dateTo").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: "12M",
minDate: chosenDate.value
});
$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});
});
notice the chosenDate variable is now just the element not the value of the element
I'm using jQuery DatePicker to select a date on my form. I want to limit the years in that calendar in such a way that it will display the years from 1900 and up.
I tried this code:
$('#' + CalenderId).datepicker({
format: "dd/mm/yyyy",
autoclose: true,
changeMonth: true,
changeYear: true,
yearRange: '1900:+0'
});
But it still shows the year earlier than 1900:
Is there any other way available to limit this?
startDate: '-30y',
endDate: '+0y'
This will help you to restrict year
eg: if current year is is 2020 then
it will allow to select start year as 2020-30 = 1990
and end year as 2020
here is the code:
$("#year").datepicker({
autoclose: !0,
yearHighlight: !0,
format: "yyyy",
viewMode: "years",
minViewMode: "years",
startDate: '-30y',
endDate: '+0y'
})
The yearRange is only for the list of years. To limit the entered date itself, you need to use minDate and maxDate. Example:
yearRange: "-150Y:-10Y",
minDate: "-150Y",
maxDate: "-10Y",
Using yearRange: "1900:+0" will only give you years 1900+.
I am using jquery DateTimePicker plugin and I have to change year range form 2008 to 2018.I am using this plugin, Please help me in this.
jQuery('#datetimepicker1').datetimepicker({
timepicker:false,
format:'d-m-Y',
changeMonth: true,
changeYear: true,
yearRange: '2008:2018'
});
Try following code.
$('#datetimepicker').datetimepicker({
timepicker:false,
format:'d-m-Y',
changeMonth: true,
changeYear: true,
yearStart : '2008',
yearEnd :'2018'
});
You can try yearEnd: 2018,yearStart: 2008.
How we can display the date in dd-mm-yyyy format using jquery datepicker, I tried with the below code, however, the year option is not visible in the datepicker.
jQuery("#formComp1_date").datepicker({
minDate: new Date(1, 1, 1900),
maxDate: new Date(dayValue, monthValue, yearValue),
dateFormat: 'dd-mm-yyyy' ,
changeMonth: true,
changeYear: true,
yearRange:"-90:+0"
});
Thanks,
Balaji.
According to the documentation for the datepicker, the yearRange property determines the range shown in the dropdown (which using the code below is -10 years, +10 years from the currently selected date). Is there a way to change this to 80 years in the past, zero years in the future. Is there something else I need to do to increase the range of dates shown?
$('.datePicker, .datePicker').datepicker({
minDate: new Date(1930,1,1,0,0,0),
yearRange: '-80+0',
dateFormat: 'dd-mm-yy',
showOn: 'both',
direction: 'left',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
buttonImage: '/Images/calendar_16.png' });
Try
yearRange: '-80:+0',
// ^