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();