Methods

info

Here all methods of the MCDatepicker are described.

MCDatepicker

create()

Creates a new calendar instance, and adds it to the instance array.

const datepicker = MCDatepicker.create({

el: '#example'

});

Props

Prop	Type	Description	Required
options	Object	Options object	Yes

Return

Returns a new calendar Instance.

---

remove()

Removes an instance from the instance array.

MCDatepicker.remove(instance);

Props

Prop	Type	Default	Description	Required
instance	Object	undefined	Instance object	Yes

---

open()

Opens the calendar UI and applies the settings of instance that are linked to the provided element id

MCDatepicker.open('#datepicker');

Props

Prop	Type	Default	Description	Required
id	String	undefined	Element id	Yes

---

close()

Hides the calendar UI.

MCDatepicker.close();

---

Instance

open()

Opens the calendar UI and applies the settings of current instance.

const datepicker = MCDatepicker.create({

el: '#example'

});

datepicker.open();

---

close()

Hides the calendar UI.

const datepicker = MCDatepicker.create({

el: '#example'

});

datepicker.close();

---

reset()

Deletes the value of linked element and sets the picked date to null.

const datepicker = MCDatepicker.create({

el: '#example'

});

datepicker.reset();

---

destroy()

Removes the calendar instance from instance array.

const datepicker = MCDatepicker.create({

el: '#example'

});

datepicker.destroy();

---

getDay()

Returns the index of the weekday if a date was picked otherwise returns null.

const datepicker = MCDatepicker.create({

el: '#example',

selectedDate: new Date()

});

const weekdayIndex = datepicker.getDay();

---

getDate()

Returns the day of the month if a date was picked otherwise returns null.

const datepicker = MCDatepicker.create({

el: '#example',

selectedDate: new Date()

});

const date = datepicker.getDate();

---

getMonth()

Returns the index of the month if a date was picked otherwise returns null.

const datepicker = MCDatepicker.create({

el: '#example',

selectedDate: new Date()

});

const month = datepicker.getMonth();

---

getYear()

Returns the year if a date was picked otherwise returns null.

const datepicker = MCDatepicker.create({

el: '#example',

selectedDate: new Date()

});

const month = datepicker.getYear();

---

getFullDate()

Returns the date object if a date was picked otherwise returns null.

const datepicker = MCDatepicker.create({

el: '#example',

selectedDate: new Date()

});

const fullDate = datepicker.getFullDate();

---

getFormatedDate()

Returns the formated date if a date was picked otherwise it returns null.

const datepicker = MCDatepicker.create({

el: '#example',

selectedDate: new Date()

});

const formatedDate = datepicker.getFormatedDate();

---

markDatesCustom()

Pushes the provided callback to an array. When the calendar table is updated it passes each date of the calendar table through the callback array and marks the date if at least one callback returns true.

const datepicker = MCDatepicker.create({

el: '#example'

});

datepicker.markDatesCustom((date) => date.getDate() == 15);

callback props

Prop	Type	Required
date	Object	No

---

setFullDate()

This method sets the instance's picket date and updates the linked element's value if the instance has one.

If the instance is active the calendar updates its content based on the new provided date.

const setFullDateBtn = document.querySelector('#setFullDateBtn');

const datepicker = MCDatepicker.create({

el: '#example'

});

setFullDateBtn.onclick = () => {

datepicker.setFullDate(new Date(2021, 1, 1));

};

Prop	Type	Required
date	Date	Yes

---

setDate()

This method changes the day of the month of the instance's picket date and updates the linked element's value if the instance has one. If the picked date is null MCDatepicker creates a new date and uses it as a new picked date.

If the instance is active, the calendar updates its content based on the modified picked date.

const setDateBtn = document.querySelector('#setDateBtn');

const datepicker = MCDatepicker.create({

el: '#example'

});

setDateBtn.onclick = () => {

datepicker.setDate(12);

};

Prop	Type	Required
date	Number	Yes

---

setMonth()

This method sets the month for the instance's picked date and updates the linked element's value if the instance has one. If the picked date is null MCDatepicker creates a new date and uses it as a new picked date.

If the instance is active, the calendar updates its content based on the modified picked date.

const setMonthBtn = document.querySelector('#setMonthBtn');

const datepicker = MCDatepicker.create({

el: '#example'

});

setMonthBtn.onclick = () => {

datepicker.setMonth(4);

};

Prop	Type	Required
Month	Number	Yes

---

setYear()

This method sets the year for the instance's picked date and updates the linked element's value if the instance has one. If the picked date is null MCDatepicker creates a new date and uses it as a new picked date.

If the instance is active, the calendar updates its content based on the modified picked date.

const setYearBtn = document.querySelector('#setYearBtn');

const datepicker = MCDatepicker.create({

el: '#example'

});

setYearBtn.onclick = () => {

datepicker.setYear(2018);

};

Prop	Type	Required
year	Number	Yes

---