Minimal Month Picker In Vanilla JavaScript

Preview:

Description:

A minimal clean month picker plugin implemented in vanilla JavaScript.

Inspired by KidSysco’s jQuery UI Month Picker, without any three-party dependencies like jQuery or jQuery UI.

How to use it:

1. Import the month picker plugin’s files into the document.

<script src="./dist/vanilla-monthpicker.js"></script>
<link href="./dist/vanilla-monthpicker.css" rel="stylesheet" />

2. Attach the month picker to an input field. That’s it.

<input type="date" id="myMonthPicker" value="2021-04-30" />

const myPicker = new MonthPicker(document.getElementById('myMonthPicker'), {
      // options here
});

3. Specify the number of months to show per row. Default: 3.

const myPicker = new MonthPicker(document.getElementById('myMonthPicker'), {
      nbMonthPerRow: 2
});

4. Determine whether to close the month picker after selection. Default: true.

const myPicker = new MonthPicker(document.getElementById('myMonthPicker'), {
      closeOnSelect: false
});

5. Set the min/max dates (js object). Default: null.

const myPicker = new MonthPicker(document.getElementById('myMonthPicker'), {
      minDate: {},
      maxDate: {},
});

6. Determine whether to hide the original input field. Default: false.

const myPicker = new MonthPicker(document.getElementById('myMonthPicker'), {
      noNewElement: true
});