Press "Enter" to skip to content

A Vanilla JavaScript Date Picker Component | MCDatepicker

Vanilla JS Datepicker is a well-designed, fully responsive, highly customizable, framework-agnostic date and date range picker component written in vanilla JavaScript.

javascript date picker, jquery datepicker, bootstrap datepicker, date picker in html, jquery date range picker, datepicker format

More Features:

  • 3 modes: modal, inline or permanent
  • Custom Workday 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 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

Official Website(mikecoj): Click Here

This superior jQuery/javascript plugin is developed by mikecoj. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.