[RESOLVED]only year show in jquery datepicker


i want only year in date picker in jquery.

please help me out.

thanks for the help.

you can set dateFormat on the datepicker


Generally, a DatePicker might be a bit of overkill if you only need to select a year (as you could simply use a <select> element), but you could try configuring it as follows :

<!-- jQuery & jQueryUI Styles and Scripts -->
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- CSS to hide some elements of the DatePicker -->
<style type='text/css'>
  /* Style to hide Dates / Months */
  .ui-datepicker-calendar,.ui-datepicker-month { display: none; }‚Äč
<script type='text/javascript'>
        changeMonth: false,
        changeYear: true,
        showButtonPanel: true,
        yearRange: '1950:2013', // Optional Year Range
        dateFormat: 'yy',
        onClose: function(dateText, inst) { 
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, 0, 1));

<!-- Your DatePicker -->
<input class='datepicker'/>

You can see a working example here.

Leave a Reply