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

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