Create Year Picker Widget From jQuery-UI Date Picker

This blog explains how to make a year picker from jQuery UI date picker widget.

jQuery-ui is a famous front-end framework from the jQuery team. It offers a lot of widgets like Date picker, button, dialog, progress bar, etc. But, it does not have Year Picker. Here, I have explained how to create a year picker from the date picker widget.

How to do

Create two input fields. One is hidden (actually date picker) and another one is an actual input field that shows year value. When we focus on actual input field, the hidden field shows date picker under the actual field.

1. Add jQuery and jQuery-ui libraries.

 <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>

 

2. Hide date picker element and month label

Set .ui-datepicker-calendar, .ui-datepicker-month { display:none !important;}.

3. Offset Of DatePicker:

Adjust the height of datepicker that depends on your actual input field.

div#ui-datepicker-div { margin-top: 41px; }

<style type="text/css">
    .ui-datepicker-calendar,
    .ui-datepicker-month {
        display: none !important;
    }

    div#ui-datepicker-div {
        margin-top: 41px;
        /*adjust this value depend on input field height*/
    }
</style>

 

 4. Actual and duplicate fields of date pickers.

<form name="yearform" id="yearform"> <input type="hidden" id="dummyseason" name="dummyseason" />
    <!-- actual datepicker but duplicate input --><input type="text" autocomplete="off" class="form-control" id="Year" name="Year" />
    <!-- actual input but duplicate datepicker-->
    </br> <button type="submit">Submit</button>
</form>

5. Invoke Year Picker when focus on “Year” field using ‘$("#Year").focus()’ event.

6. ‘stepMonths: 12’ property can skip month to year when click left and right arrow of date picker.

7. Set selected year to actual field (‘name=Year’) using onChangeMonthYear method.

<script type="text/javascript">
    $("#Year").focus(function(e) { //invoke real datepicker with duplicate
        $("#dummyseason").datepicker('show');
    });
    $("#dummyseason").datepicker({
        stepMonths: 12,
        yearRange: "c-10:c+20",
        showButtonPanel: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        onChangeMonthYear: function(year, month, obj) {
            $("#Year").val(year); //set YEAR value TO real input
            $("#dummyseason").val(month.toString().concat("/01/", year)); //set full date to REAL daTEPIC
        },
    });
</script>

 

 

Summary

jQuery-ui is a perfect UI tool for web applications. We can extend the features of jQuery-ui with little efforts.