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

Time & Clock
File Size: 22.2 KB
Views Total: 1300 views
Last Update:August 21, 2023
Publish Date: October 16, 2015
Official Website: Go to website
License: MIT
Plugin Author: tlemens
Demo    Download

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.


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

  // e.g. May 2022
  altFormat: 'MM yy' 

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

  stepMonths: 6,


Thanks for make jQuery plugin is developed by tlemens For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins