Month Picker And Year With jQuery UI – jQuery monthpicker.js

The jQuery UI Month Picker is a lightweight and easy-to-use plugin that allows users to select a month and year from a dropdown calendar. It’s built on top of the jQuery UI Datepicker widget, making it highly customizable and flexible. The plugin supports multiple date formats and languages, and offers a range of options for styling and behavior. With its simple API and intuitive interface, the jQuery UI Month Picker is an excellent choice for any web application that requires a quick and user-friendly way to select a month and year.

How to use :

Add the necessary jQuery and jQuery UI in the HTML page.

<link rel="stylesheet" href="/path/to/cdn/jquery-ui.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

Download and load the month picker plugin after jQuery.

<script src="monthpicker.js"></script>

 Create two input fields as follows:

<!-- Month Picker Input -->
<input class="js-monthpicker" type="hidden">

<!-- Alternative Input (The selected month/year will be placed here) -->
<input type="text" />

Initialize the month picker on document ready.

$(function(){
  $('.js-monthpicker').monthpicker();
});

Customize the month/year format. Default: ‘M yy’.

$('.js-monthpicker').monthpicker({ 
  // e.g. May 2022
  altFormat: 'MM yy' 
});

Set the step length of the month when switching between years. Default: ’12’.

$('.js-monthpicker').monthpicker({ 
  stepMonths: 6,
});

Done