jQuery UI DatePicker para mostrar solo el año

Solución:

  $(function() {
    $('#datepicker1').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});​

El estilo debe ser

.ui-datepicker-calendar {
    display: none;
    }​

demostración de trabajo

**NOTE :
** Si alguien tiene una objeción de que “¡por qué he respondido esta pregunta ahora!” Porque probé todas las respuestas de esta publicación y no obtuve ninguna solución, así que intenté mi camino y obtuve una solución, así que estoy compartiendo con los próximos participantes ****

HTML

<label for="startYear"> Start Year: </label>
  <input name="startYear" id="startYear" class="date-picker-year" />   

jQuery

 <script type="text/javascript">
        $(function() {
            $('.date-picker-year').datepicker({
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'yy',
                onClose: function(dateText, inst) { 
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, 1));
                }
            });
        $(".date-picker-year").focus(function () {
                $(".ui-datepicker-month").hide();
            });
        });

</script>

En 2018,

$('#datepicker').datepicker({
    format: "yyyy",
    weekStart: 1,
    orientation: "bottom",
    language: "{{ app.request.locale }}",
    keyboardNavigation: false,
    viewMode: "years",
    minViewMode: "years"
});

---

---

Utiliza Nuestro Buscador