Light-weight Single & Multi-Month Picker jQuery Plugin

This can be a light-weight and user-friendly jQuery month picker plugin that permits your customers to pick single month or a number of months with a number of clicks. It helps yr navigation, customizable month/yr codecs, disabled date guidelines, and responsive grid layouts.

This plugin fits net purposes requiring month-based enter. You should use it for subscription kinds choosing billing cycles, reporting instruments filtering information by month, or reservation methods blocking unavailable dates. It reduces handbook month entry errors and standardizes enter codecs. 

Learn how to use it:

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

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

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

2. Connect the month picker to an enter discipline. The chosen month or months seem because the enter worth.

<enter kind="textual content" id="myMonthPicker" />

$(doc).prepared(perform() {
  $("#myMonthPicker").monthpicker();
});

3. MonthPicker.js will not be restricted to enter fields. You possibly can connect it to just about any HTML aspect, comparable to button or div.

$(doc).prepared(perform() {
  $("#button").monthpicker();
});

4. Entry the chosen month(s) programmatically. This technique returns an object or an array of objects representing the chosen months. The month is represented as a 0-indexed quantity (0 for January, 11 for December). The yr is included if yr navigation is enabled.

var myData = $("#myMonthPicker").information("alternatives");

5. Customise the month picker’s habits and look with the next choices. The plugin helps these format tokens:

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

$("#myMonthPicker").monthpicker({
  multiSelect: false, // Permit a number of alternatives.
  showYearNav: true, // Allow yr navigation.
  yr: new Date().getFullYear(), // Default yr.
  displayFormat: "MM/YYYY", // Format for show.
  gridMonthFormat: "MMMM", // Format for month names in grid.
  worth: null, // Optionally available preliminary worth.
  monthBase: 1, // Month numbering base (January = 1).
  disabledRule: null, // Callback: (month, yr) => boolean
  onMonthSelect: null, // Callback perform after choice.
});

This superior jQuery plugin is developed by nguyenson0904. For extra Superior Usages, please verify the demo web page or go to the official web site.