Tiny Responsive Date Picker Component For JavaScript/TypeScript – monthpicker-lite-js

Preview:

Description:

monthpicker-lite-js is a lightweight JavaScript/TypeScript component to create responsive, customizable, accessible date pickers for modern web projects.

The date picker positions itself optimally based on the input element, accounts for scrolling and resizing, and adjusts on window resize. It provides proper ARIA roles, logical tab order, and full keyboard support for accessibility. Customizable options include date format, visible days, and callback functions when a date is selected. The vanilla CSS is easy to customize with theming and layout variables.

How to use it:

1. Install and import the monthpicker-lite-js.

# NPM
$ npm i monthpicker-lite-js

// Stylesheet
import 'monthpicker-lite-js/dist/monthpicker-lite-js.css';
// Vanilla JavaScript
import { MonthPicker } from 'monthpicker-lite-js';
// TypeScript
import {
  MonthPicker,
  MonthPickerInterface,
  MonthPickerOptionsInterface,
} from 'monthpicker-lite-js';

2. Initialize a new MonthPicker instance and pass parameters as follows:

const monthPicker = new MonthPicker(
  // root container to hold the date picker
  // required
  rootContainer: HTMLElement,
  // start date
  startDate: new Date(),
  // callback
  pickerCallbacks: [(date: Date) => console.log(date)],
  // 'dark' or 'light'
  theme: 'dark',
  /* date format
    'ddmmyyyy' (08292023)
    'dd/mm/yyyy' (29/08/2023)
    'mm/dd/yyyy' (08/29/2023)
    'dd-mm-yyyy' (29-08-2023)
    'mm-dd-yyyy' (08-29-2023)
    'month dd, yyyy' (August 29th, 2023)
    'month dd yyyy' (August 29 2023)
    'mth dd yyyy' (Aug 29 2023)
    'mth dd, yyyy' (Aug 29th, 2023)
  */
  format: 'month dd, yyyy',
  // close the date picker after selection
  closeOnSelect: true,
  // only shows the current month interface
  onlyShowCurrentMonth: false,
  // align the date picker to middle of input element
  alignPickerMiddle: false,
)

3. API methods.

// set date
monthPicker.setDate(new Date(2023, 9, 9));
// get date
const currentDate = monthPicker.getDate(); 
// [2023, 9, 9]
const [year, month, day] = monthPicker.getDateArray();  
// 'September 9th, 2023'
const dateFormatted = monthPicker.getDateFormatted();   
// set date format
monthPicker.setFormat('mm/dd/yyyy');
// get date format
const currentFormat = monthPicker.getFormat(); 
// set theme
monthPicker.setTheme('light');
// get theme
const currentTheme = monthPicker.getTheme(); 
// set callbacks
monthPicker.setCallbacks([(() => console.log(
  'all other callbacks will be removed and replaced with this one'
))]);
// get callbacks
const currentCallbacks = monthPicker.getCallbacks(); 
// add a single callback
monthPicker.addCallback(() => {
  // do something
});
// set CloseOnSelect
monthPicker.setCloseOnSelect(false);
// get CloseOnSelect
const currentCloseOnSelect = monthPicker.getCloseOnSelect();
// set OnlyShowCurrentMonth
monthPicker.setOnlyShowCurrentMonth(true);
// get OnlyShowCurrentMonth
const currentOnlyShowCurrentMonth = monthPicker.getOnlyShowCurrentMonth();
// set AlignPickerMiddle
monthPicker.setAlignPickerMiddle(true);
// get AlignPickerMiddle
const currentAlignPickerMiddle = monthPicker.getAlignPickerMiddle();
// destroy the date picker
monthPicker.destroy();
// re-init the date picker
monthPicker.init();
// set root container
monthPicker.setRootContainer(document.querySelector('.new-container'));
// disable the date picker
monthPicker.disable();
// enable the date picker
monthPicker.enable(); 
// open the date picker
monthPicker.open();
// close the date picker
monthPicker.close();
// toggle the date picker
monthPicker.toggle();

Changelog:

v1.2.0 (09/02/2023)

• Update