Beautiful Date Picker Component – MCDatepicker

Category: Date & Time , Javascript | March 28, 2021
Author: mikecoj
Views Total: 646 views
Official Page: Go to website
Last Update: March 28, 2021
License: MIT


Beautiful Date Picker Component – MCDatepicker


A well-designed, fully responsive, highly-customizable, framework-agnostic date & date range picker component written in Vanilla JavaScript.

More Features:

  • 3 Modes: Modal, Inline, Or Permanent
  • Custom weekdays 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 use it:

1. To get started, insert the MCDatepicker’s JavaScript and Stylesheet in the document.

<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 field you provide. This will open a calendar interface in a modal popup where you can select 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 week days and month names.

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

6. Disable specific dates.

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

7. Determine whether to show the calendar header. Default: true.

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

8. Set the selected date on page load.

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



  • v0.3.1: Fixed month select height & padding


  • v0.2.1: fixed min & max date year check

You Might Be Interested In:

6 thoughts on “Beautiful Date Picker Component – MCDatepicker

  1. Bartr

    Doesn’t work, downloaded files, made a text.html file and put everything according to the instructions. But nothing happens when I click on the text field.

    1. CSS Script Post author

      Make sure that the path of the resource is correct. For example: /dist/mc-calendar.min.js should be /path/to/your-folder/dist/mc-calendar.min.js.

  2. Merapi

    disableDates: [2021-03-25] or disableDates: [‘2021-03-25′] or disableDates: [’25’] or disableDates: [25] not working

  3. Unknown

    Great plugin and works on all browsers. Doesn’t work on ios devices in hybrid mode using onsen UI. Null object error in onfocus preventDefault.

  4. Riva

    How do I identify that a date has changed … is it possible to set up a callback event?


Leave a Reply