jQuery UI datepicker functionality to select only year or year-month or year-month-date

Question

I'm using jQuery UI plugin for datepicker and I need some features in it. I want users to be able to select date in following three formats:

User can select only year.
User can select year and month.
User can select year, month and date from calendar.

Last one is obviously simple that user can select any date from calendar, I can also made datepicker to display year and month like below:

$(function() {
$('.date-picker').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));
    }
});
});

http://jsfiddle.net/bopperben/DBpJe/

But I can't find any way to achieve all above point together in same datepicker. If this is not possible in this plugin can you suggest me any other plugin which is user friendly. Thanks!

Navita Sharma Navita Sharma · Accepted Answer · 2017-10-11T12:44:11

Telerik's Kendo UI datepicker plugin you can use. It has many functionality and can be easily customized.

Also found this link, which might help you http://www.telerik.com/forums/date-picker-setting-for-selecting-only-month-and-year

jQuery UI datepicker functionality to select only year or year-month or year-month-date

1 Answers