Configuration

Option	Type	Default	Description
`el`	String	`null`	The ID of the instance's linked element.
`context`	`ELEMENT_NODE, DOCUMENT_FRAGMENT_NODE`	`document.body`	The ID of the instance's linked element.
`dateFormat`	String	`DD-MMM-YYYY`	Sets the format of the returned date.
`bodyType`	String	`modal`	Sets the calendar mode.
`autoClose`	Boolean	`false`	Closes the calendar when a date is selected.
`closeOndblclick`	Boolean	`true`	Closes the calendar on double click.
`closeOnBlur`	Boolean	`false`	Closes the calendar when it loses focus.
`showCalendarDisplay`	Boolean	`true`	Shows or hides the calendar display.
`customWeekDays`	Array	EN Weekdays	Sets custom calendar weekdays.
`customMonths`	Array	EN Month names	Sets custom calendar months name.
`customOkBTN`	String	`OK`	Sets custom OK button label.
`customClearBTN`	String	`Clear`	Sets custom Clear button label.
`customCancelBTN`	String	`CANCEL`	Sets custom CANCEL button label.
`firstWeekday`	Number	`0`	Sets first weekday of the calendar.
`selectedDate`	Date	`null`	Sets the default picked date.
`minDate`	Date	`null`	Sets the min selectable date.
`maxDate`	Date	`null`	Sets the max selectable date.
`jumpToMinMax`	Boolean	`true`	Jumps to min \| max dates using year arrows
`jumpOverDisabled`	Boolean	`true`	Jumps over the disabled months and years.
`disableWeekends`	Boolean	`false`	Disables weekends.
`disableWeekDays`	Array	`[]`	Disables specific days of the week.
`disableDates`	Array	`[]`	Disables specific dates.
`disableMonths`	Array	`[]`	Disables specific months.
`disableYears`	Array	`[]`	Disables specific years.
`allowedMonths`	Array	`[]`	Allows specific months only.
`allowedYears`	Array	`[]`	Allows specific years only.
`markDates`	Array	`[]`	Mark specific dates.
`theme`	Object	`Default theme`	Customize calendar color theme.

el#

This option specifies the id of the <input> element that the instance needs to be linked to. The id needs to be specified as a css selector.

const datepicker = MCDatepicker.create({
    el: '#example'
});

note

Starting with version v0.4.0 this option is not required

context#

const datepicker = MCDatepicker.create({
    el: '#example',
    context: document.body
});

dateFormat#

This option is used to specify the format of the returned date. By default is set to DD-MMM-YYYY. More details about the valid formats can be found here

const datepicker = MCDatepicker.create({
    el: '#example',
    dateFormat: 'dddd, dd-mmmm-yy'
});

bodyType#

This option sets the calendar UI type, currently, it supports only 2 types: modal and inline

const datepicker = MCDatepicker.create({
    el: '#example',
    bodyType: 'inline'
});

autoClose#

This option closes the calendar automatically when an active date is selected.

const datepicker = MCDatepicker.create({
    el: '#example',
    autoClose: true
});

closeOndblclick#

This option closes the calendar automatically by double-clicking on an active date. By default this option is set to true.

const datepicker = MCDatepicker.create({
    el: '#example',
    closeOndblclick: false
});

closeOnBlur#

This option closes the calendar automatically when it loses focus. By default this option is set to false.

const datepicker = MCDatepicker.create({
    el: '#example',
    closeOnBlur: true
});

showCalendarDisplay#

Use this option to show or hide the calendar display in the modal mode.

const datepicker = MCDatepicker.create({
    el: '#example',
    showCalendarDisplay: false
});

note

This option works only on desktop!

customWeekDays#

Add an array of custom weekdays, they will be used to display weekdays when a date is picked, also these custom weekdays are used by calendar table.

const datepicker = MCDatepicker.create({
    el: '#example',
    customWeekDays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
});

important

The array should start with Sunday

customMonths#

Similar to customWeekDays this option will be used to display the month of the picked day, also they are used in the calendar table.

const datepicker = MCDatepicker.create({
    el: '#example',
    customMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
});

customOkBTN#

Use this option to set a custom label of the OK button

const datepicker = MCDatepicker.create({
    el: '#example',
    customOkBTN: 'ok'
});

customClearBTN#

Use this option to set a custom label of the Clear button

const datepicker = MCDatepicker.create({
    el: '#example',
    customClearBTN: 'Șterge'
});

customCancelBTN#

Use this option to set a custom label of the CANCEL button

const datepicker = MCDatepicker.create({
    el: '#example',
    customCancelBTN: 'Anulează'
});

firstWeekday#

If you are living in Europe, you probably need the calendar to start on Monday. This option allows you to set the first weekday of the calendar table. Accepts numbers from 0 to 6, where 0 represents Sunday.

const datepicker = MCDatepicker.create({
    el: '#example',
    firstWeekday: 1
});

selectedDate#

Use this option to set a picked date when the calendar is rendered for the first time. By default, the option is set to null.

const datepicker = MCDatepicker.create({
    el: '#example',
    selectedDate: new Date()
});

minDate#

Use this option to set the smallest selectable date. By default, the option is set to null.

const datepicker = MCDatepicker.create({
    el: '#example',
    minDate: new Date(2020, 10, 25)
});

maxDate#

Use this option to set the biggest selectable date. By default, the option is set to null.

const datepicker = MCDatepicker.create({
    el: '#example',
    maxDate: new Date(2021, 5, 15)
});

jumpToMinMax#

Jumps to min | max dates if the prev | next year is out of min | max dates

const datepicker = MCDatepicker.create({
    el: '#example',
    minDate: new Date(2020, 10, 25),
    maxDate: new Date(2021, 5, 15),
    jumpToMinMax: false
});

jumpOverDisabled#

Jumps over the disabled months and years.

When this option is enabled, the calendar jumps to the ( next | prev ) active month and year if the (next | prev) month or year is disabled.

const datepicker = MCDatepicker.create({
    el: '#example',
    disableMonths: [0, 5, 7],
    allowedYears: [2018, 2019, 2021, 2025],
    jumpOverDisabled: true
});

disableWeekends#

By enabling this option, you are disabling Saturday and Sunday so they cannot be selected.

const datepicker = MCDatepicker.create({
    el: '#example',
    disableWeekends: true
});

disableWeekDays#

Similar to disableWeekends , this option disables custom weekdays. You need to add an array of indexes that represents the weekdays you want to disable. Accepts numbers from 0 to 6, where 0 represents Sunday.

const datepicker = MCDatepicker.create({
    el: '#example',
    disableWeekDays: [2, 3]
});

disableDates#

If you want to disable a specific date, this option allows you to disable any date you want. Accepts an array of dates objects.

const datepicker = MCDatepicker.create({
    el: '#example',
    disableDates: [new Date(2021, 5, 6), new Date(2021, 4, 15)]
});

disableMonths#

If you want to disable a specific month, this option allows you to disable any month you want. Accepts an array of numbers.

const datepicker = MCDatepicker.create({
    el: '#example',
    disableMonths: [0, 5, 7]
});

disableYears#

If you want to disable a specific years, this option allows you to disable the specified years. Accepts an array of numbers.

const datepicker = MCDatepicker.create({
    el: '#example',
    disableYears: [2020, 2019, 2025]
});

allowedMonths#

If you want to allow the user to select specific months only, this option allows you to do so. Accepts an array of numbers.

const datepicker = MCDatepicker.create({
    el: '#example',
    allowedMonths: [2, 4, 5, 7]
});

important

This option overrides the rules of disableMonths option.

allowedYears#

If you want to allow the user to select specific years only, this option allows you to do so. Accepts an array of numbers.

const datepicker = MCDatepicker.create({
    el: '#example',
    allowedYears: [2018, 2019, 2021, 2025]
});

important

This option overrides the rules of disableYears option.

markDates#

This option allows you to mark custom dates. Accepts an array of dates objects.

const datepicker = MCDatepicker.create({
    el: '#example',
    markDates: [new Date(2021, 4, 4), new Date(2021, 6, 11)]
});

theme#

The theme option allows you to set the color theme of the datepicker. It accepts an object representing the calendar parts and their types. It also contains some general options, that are used across the entire calendar component. If a custom color is added to a specific option representing a calendar part, the general option is overridden for that calendar part.

For example, if you want to set the background color of the calendar to red, you can do it like this:

const datepicker = MCDatepicker.create({
    el: '#example',
    theme: {
        main_background: 'red' // Accepts CSS Legal Color Values
    }
});

For more information about the theme object, please refer to the theme documentation.