Author: | mikecoj |
---|---|
Views Total: | 646 views |
Official Page: | Go to website |
Last Update: | March 28, 2021 |
License: | MIT |
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
Doesn’t work, downloaded files, made a text.html file and put everything according to the instructions. But nothing happens when I click on the text field.
Make sure that the path of the resource is correct. For example:
/dist/mc-calendar.min.js
should be/path/to/your-folder/dist/mc-calendar.min.js
.disableDates: [2021-03-25] or disableDates: [‘2021-03-25′] or disableDates: [’25’] or disableDates: [25] not working
Year previous/next button are not visible in inline mode or viewing it smaller/mobile devices.
Great plugin and works on all browsers. Doesn’t work on ios devices in hybrid mode using onsen UI. Null object error in onfocus preventDefault.
How do I identify that a date has changed … is it possible to set up a callback event?