A Vanilla JavaScript Date Picker Component | MCDatepicker

Vanilla JS Datepicker is a well-designed, fully responsive, highly customizable, framework-agnostic date and date range picker component written in vanilla JavaScript.

javascript date picker, jquery datepicker, bootstrap datepicker, date picker in html, jquery date range picker, datepicker format

More Features:

  • 3 modes: modal, inline or permanent
  • Custom Workday and Month Names.
  • Allows you to add custom events to dates.
  • Allows you to disable weekends and specific dates.
  • Allows you to mark dates.

How to make use of it:

1. To get began, insert the MCDatepicker’s JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="/dist/mc-calendar.min.css" />
<script src="/dist/mc-calendar.min.js"></script>

2. Attach the date picker to an input area you present. This will open a calendar interface in a modal popup the place you possibly can choose a date by click.

<input id="example" type="text" />
const myDatePicker = MCDatepicker.create({ 
      el: '#example' 

3. Set the date format. Default: ‘DD-MMM-YYYY’.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      dateFormat: 'MMM-DD-YYYY',

4. Determine the display mode: ‘modal’, ‘inline’, or ‘permanent’.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      bodyType: 'inline',

5. Customize weekdays and month names.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      customWeekDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      customMonths: [

6. Disable particular dates.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      disableWeekends: false,
      disableWeekDays: [], // ex: [0,2,5]

7. Determine whether or not to point out the calendar header.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      showCalendarDisplay: false

8. Set the chosen date on the web page load.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      selectedDate: new date(), // today

Beautiful Date Picker Component, Vanilla JS Datepicker Plugin/Github

See Demo And Download

Official Website(mikecoj): Click Here

This superior jQuery/javascript plugin is developed by mikecoj. For extra advanced usage, please go to the official website.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…