/MCDatepicker

A vanilla JavaScript Datepicker

Primary LanguageJavaScriptMIT LicenseMIT

MCDatepicker

Framework-agnostic, highly-customizable Vanilla JavaScript datepicker with zero dependencies.

Features

  • 2 Modes: (modal, inline)
  • Dependency free
  • Custom weekday and month names
  • Disable weekdays and specific dates
  • Fully responsive/ Mobile friendly

Installation

Via NPM

npm install mc-datepicker --save

Using CDN

Include CDN links in the <head>...

<link href="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js"></script>

Usage

<input id="datepicker" type="text">

If you’re using a bundler, e.g. webpack, you’ll need to import MCDatepicker

import MCDatepicker from 'mc-datepicker';
  1. Create a new instance, and attach it to an input field
const picker = MCDatepicker.create({
	el: '#datepicker'
});
  1. Customize the datepicker by adding more options
const picker = MCDatepicker.create({
	el: '#datepicker',
	disableWeekends: true
});
  1. Use methods to manipulate the datepicker
btn.onclick = () => picker.open();

Documentation

Online Docs

License

MIT