datepicker shown month year only and full calendar within same page

In my previous post [JQuery DatePicker display only the month and the year dropdown], i also done the demo on datepicker widget that will only display month and year for the dropdown. Unfortunately, that will apply to all the textbox with the page that refer to datepicker.

Here is the workaround that will able you to use the datepicker to shown only month and year or full calendar. This is gorgeous.

Month and Year ONLY:

Full Calendar:

  • Add new class into the beforeShow method
  • inst.dpDiv.addClass('monthonly');

  • Remove the added class into the onClose
  • inst.dpDiv.removeClass('monthonly');

  • Add new css to handle “monthonly” class
  • .monthonly#ui-datepicker-div .ui-datepicker-calendar
    display: none;

Download the source code

Hope you enjoy it!