Beautiful Date Picker Component – MCDatepicker

Preview:

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
})

Changelog:

03/28/2021

• v0.3.1: Fixed month select height & padding

03/25/2021

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