Beautiful Date Picker Component – MCDatepicker

Category: Date & Time , Javascript | July 9, 2021
Author: mikecoj
Views Total: 718 views
Official Page: Go to website
Last Update: July 9, 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

9. More configuration options with default values.

const myDatePicker = MCDatepicker.create({ 
      el: '#example',
      context: document.body,
      autoClose: false,
      closeOndblclick: true,
      closeOnBlur: false,
      customOkBTN: 'OK',
      customClearBTN: 'Clear',
      customCancelBTN: 'CANCEL',
      firstWeekday: 0, // ex: 1 accept numbers 0-6;
      minDate: null,
      maxDate: null,
      jumpToMinMax: true,
      jumpOverDisabled: true,
      disableDates: [], // ex: [new Date(2019,11, 25), new Date(2019, 11, 26)]
      allowedMonths: [], // ex: [0,1] accept numbers 0-11;
      allowedYears: [], // ex: [2022, 2023]
      disableMonths: [], /// ex: [3,11] accept numbers 0-11;
      disableYears: [], // ex: [2010, 2011]
      markDates: [],
      theme: defaultTheme,

10. API methods.

// open;

// close

// reset

// destroy

// get the index of the weekday

// get the day of the month

// get the index of the month

// get the year

// get the the date object

// get the formated date

// push the provided callback to an array

// set date

// set month

// set year

11. Events.

myDatePicker.onOpen(() => console.log('Do Something'));
myDatePicker.onClose(() => console.log('Do Something'));
myDatePicker.onCancel(() => console.log('Do Something'));
myDatePicker.onSelect((date, formatedDate) => console.log('Do Something'));
myDatePicker.onMonthChange(() => console.log('Do Something'));
myDatePicker.onYearChange(() => console.log('Do Something'));


v0.6.1 (07/09/2021)

  • fixed null context

v0.6.0 (07/08/2021)

  • added context option
  • added theme option

v0.5.1 (06/07/2021)

  • used the _id property to identify the instance

v0.5.0 (05/26/2021)

  • added autoClose option
  • added closeOnBlur option
  • added closeOndblclick option
  • added setFullDate() method
  • added setDate() method
  • added setMonth() method
  • added setYear() method
  • fixed styles for safari
  • fixed animations for safari


  • v0.4.0: fixed display update on preview select


  • v0.3.1: Fixed month select height & padding


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

You Might Be Interested In:

10 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

    1. on4ciq

      Have you find an answer also looking at it.
      customWeekDays: [‘S’, ‘M’, ‘T’, ‘W’, ‘T’, ‘F’, ‘S’], Create also error: Data does not match the schema for property: “customWeekDays”

  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?

    1. chakib

      $(“.mc-date–active”).click(function() {
      var date = new Date($(this).data(“val-date”));

  5. tcx

    Specifying min and max dates would be a great add to this.


Leave a Reply