igDatePicker - select only year

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div style="margin: 1rem;">
  <input id="datePicker1" type="date" name="startDayPicker"></input>
</div>

CSS

.ui-datepicker-calendar
{
    display: block;
}

.ui-datepicker-month{
    display: block;
}

.ui-datepicker-next, .ui-datepicker-prev{
  display: none;
}

JavaScript

$(function () {
        $(function () {
            $("#datePicker1").igDatePicker({
                dateDisplayFormat: "yyyy",
                dateInputFormat : "yyyy",
                placeHolder : "Year",
                datepickerOptions: {
                  changeMonth: true
            		},
                dropDownListClosed: function (evt, ui) { 
            				var year = $(".ui-datepicker-year :selected").text();
            				$("#datePicker1").igDatePicker("value", new Date(year, 1, 1));
        			} 
            });
        });
        
        
});