Beautiful Date Picker Component – MCDatepicker

Category: Date & Time , Javascript | October 16, 2021
Author:mikecoj
Views Total:9,718 views
Official Page:Go to website
Last Update:October 16, 2021
License:MIT

Preview:

Beautiful Date Picker Component – MCDatepicker

Description:

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: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
})

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
myDatePicker.open();
// close
myDatePicker.close();
// reset
myDatePicker.reset();
// destroy
myDatePicker.destroy();
// get the index of the weekday
myDatePicker.getDay();
// get the day of the month
myDatePicker.getDate();
// get the index of the month
myDatePicker.getMonth();
// get the year
myDatePicker.getYear();
// get the the date object
myDatePicker.getFullDate();
// get the formated date
myDatePicker.getFormatedDate();
// push the provided callback to an array
myDatePicker.markDatesCustom(date);
// set date
myDatePicker.setFullDate(date);
myDatePicker.setDate(date);
// set month
myDatePicker.setMonth(month);
// set year
myDatePicker.setYear(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'));

Changelog:

v0.6.5 (10/16/2021)

  • Fixed autoclose

v0.6.4 (09/25/2021)

  • Fixed autoclose

v0.6.3 (09/22/2021)

  • Update

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

04/30/2021

  • v0.4.0: fixed display update on preview select

03/28/2021

  • v0.3.1: Fixed month select height & padding

03/25/2021

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

You Might Be Interested In:


14 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.

    Reply
    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.

      Reply
  2. Merapi

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

    Reply
    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”

      Reply
      1. casper

        This one works for me (from the sandbox):

        const firstDatePicker = MCDatepicker.create({
        el: ‘#datepicker_one’,
        bodyType: ‘inline’,
        autoClose: true,
        // closeOnBlur: true,
        dateFormat: ‘dddd, dd mmmm yyyy’,
        disableDates: [new Date(2021, 1, 12), new Date(2021, 4, 15)],
        customWeekDays: [‘Duminică’, ‘Luni’, ‘Marți’, ‘Miercuri’, ‘Joi’, ‘Vineri’, ‘Sâmbătă’],
        customMonths: [
        ‘Ianuarie’,
        ‘Februarie’,
        ‘Martie’,
        ‘Aprilie’,
        ‘Mai’,
        ‘Iunie’,
        ‘Iulie’,
        ‘August’,
        ‘Septembrie’,
        ‘Octombrie’,
        ‘Noiembrie’,
        ‘Decembrie’
        ],
        customOkBTN: ‘ok’,
        customClearBTN: ‘Șterge’,
        customCancelBTN: ‘Anulează’,
        selectedDate: new Date(2021, 1, 18),
        firstWeekday: 1,
        minDate: new Date(2019, 2, 22),
        maxDate: new Date(2023, 3, 22),
        markDates: [new Date(2021, 2, 21), new Date(2021, 3, 1)],
        disableYears: [2020],
        disableMonths: [8],
        // theme: calendarTheme
        });

        Reply
  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.

    Reply
  4. Riva

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

    Reply
    1. chakib

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

      Reply
  5. tcx

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

    Reply
  6. SM

    Hi, How do we change the color of some dates like 1,2,4,7 date need to show red color?

    Reply
  7. SM

    Facing an issue, the markDatesCustom fucntion not working on the Iphone and other devices working. Please help me to fix the issue

    Reply
  8. Bjørn H. Sandvik

    Apologies if this has been asked before, but is it possible/easy to change the first day of the week? In my part of the world, weeks start on a Monday..

    Reply

Leave a Reply