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';

Create a new instance, and attach it to an input field

const picker = MCDatepicker.create({
	el: '#datepicker'
});

Customize the datepicker by adding more options

const picker = MCDatepicker.create({
	el: '#datepicker',
	disableWeekends: true
});

Use methods to manipulate the datepicker

btn.onclick = () => picker.open();

Documentation

Online Docs

License

MIT