Lightweight Single & Multi-Month Picker jQuery Plugin

This is a lightweight and user-friendly jQuery month picker plugin that allows your users to select single month or multiple months with a few clicks. It supports year navigation, customizable month/year formats, disabled date rules, and responsive grid layouts.

This plugin suits web applications requiring month-based input. You can use it for subscription forms selecting billing cycles, reporting tools filtering data by month, or reservation systems blocking unavailable dates. It reduces manual month entry errors and standardizes input formats. 

How to use it:

1. Add jQuery library and the MonthPicker.js files to your webpage.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Month Picker -->
<link rel="stylesheet" href="libs/monthPicker.css">
<script src="libs/monthPicker.js"></script>

2. Attach the month picker to an input field. The chosen month or months appear as the input value.

<input type="text" id="myMonthPicker" />

$(document).ready(function() {
  $("#myMonthPicker").monthpicker();
});

3. MonthPicker.js is not limited to input fields. You can attach it to virtually any HTML element, such as button or div.

$(document).ready(function() {
  $("#button").monthpicker();
});

4. Access the selected month(s) programmatically. This method returns an object or an array of objects representing the selected months. The month is represented as a 0-indexed number (0 for January, 11 for December). The year is included if year navigation is enabled.

var myData = $("#myMonthPicker").data("selections");

5. Customize the month picker's behavior and appearance with the following options. The plugin supports these format tokens:

• YYYY or yyyy: Full year (e.g., 2025)
• YY: Two-digit year (e.g., 25)
• MMMM: Full month name (e.g., March)
• MMM: Short month name (e.g., Mar)
• MM: Two-digit month (e.g., 02)
• M: Single-digit month (e.g., 2)

$("#myMonthPicker").monthpicker({
  multiSelect: false, // Allow multiple selections.
  showYearNav: true, // Enable year navigation.
  year: new Date().getFullYear(), // Default year.
  displayFormat: "MM/YYYY", // Format for display.
  gridMonthFormat: "MMMM", // Format for month names in grid.
  value: null, // Optional initial value.
  monthBase: 1, // Month numbering base (January = 1).
  disabledRule: null, // Callback: (month, year) => boolean
  onMonthSelect: null, // Callback function after selection.
});

---

This awesome jQuery plugin is developed by nguyenson0904. For more Advanced Usages, please check the demo page or visit the official website.