How to Limit The Range of Date Picker to Only One year?

Today, We want to share with you jquery datepicker year range.In this post we will show you jquery datepickers year range current year, hear for how to restrict year in jquery datepickers we will give you demo and example for implement.In this post, we will learn about Create Dynamic Calendar Using JQuery, Ajax And PHP with an example.

Datepicker year range Example

jquery datepickers set year range

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2000:2039"
    });
});

jQuery UI: Datepickers set year range dropdown to 100 years
Example

yearRange: '2010:2040', // specifying a hard coded year range

//OR

yearRange: "-100:+0", // last hundred years

jQueryUI DatePickers YearRange and ChangeYear

Read Also:  JavaScript Capitalize first letter uppercase, lowercase and camel case

Example:

$('.your_bdate_picker_id').datepicker({changeYear: true, yearRange : 'c-65:c+10'});

Set start and end year range in jQuery UI Datepicker
index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" /> 
<script type = "text/javascript">
    <!--
    $(function () {
        $("#joinDate").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '2020:2031'
        });
    });
    //-->
</script>
<input type = "text" id = "joinDate" />

Dynamically detect the current year and set it as end year

Read Also:  JavaScript Arrays & objects Tips, tricks and examples

index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" /> 
<script type = "text/javascript">
    <!--
    $(function () {
        $("#birthDt").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '2000:' + new Date().getFullYear().toString()
        });
    });
    //-->
</script>
<input type = "text" id = "birthDt" />

I hope you get an idea about Set start and end year range in jQuery UI Datepicker.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.