Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mikecoj/MCDatepicker
A vanilla JavaScript Datepicker
https://github.com/mikecoj/MCDatepicker
datepicker vanilla-javascript-datepicker
Last synced: about 1 month ago
JSON representation
A vanilla JavaScript Datepicker
- Host: GitHub
- URL: https://github.com/mikecoj/MCDatepicker
- Owner: mikecoj
- License: mit
- Created: 2020-10-17T17:18:24.000Z (about 4 years ago)
- Default Branch: develop
- Last Pushed: 2023-12-14T14:19:05.000Z (about 1 year ago)
- Last Synced: 2024-11-11T19:24:13.213Z (about 2 months ago)
- Topics: datepicker, vanilla-javascript-datepicker
- Language: JavaScript
- Homepage: https://mcdatepicker.netlify.app/
- Size: 2.46 MB
- Stars: 93
- Watchers: 11
- Forks: 18
- Open Issues: 38
-
Metadata Files:
- Readme: README.MD
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# MCDatepicker
Framework-agnostic, highly-customizable Vanilla JavaScript datepicker with zero dependencies.
### Features
- 2 Modes: (modal, inline)
- Dependency free
- Custom weekday and month names
- Disable weekdays and specific dates
- Fully responsive/ Mobile friendly
## Installation
#### Via NPM
```
npm install mc-datepicker --save
```
#### Using CDN
Include CDN links in the ``...
```html
```
## Usage
```html
```
If you’re using a bundler, e.g. webpack, you’ll need to import ` MCDatepicker`
```javascript
import MCDatepicker from 'mc-datepicker';
```
1. Create a new instance, and attach it to an input field
```javascript
const picker = MCDatepicker.create({
el: '#datepicker'
});
```
2. Customize the datepicker by adding more options
```javascript
const picker = MCDatepicker.create({
el: '#datepicker',
disableWeekends: true
});
```
3. Use methods to manipulate the datepicker
```javascript
btn.onclick = () => picker.open();
```
## Documentation
[Online Docs](https://mcdatepicker.netlify.app/docs/)
## License
[MIT](LICENSE)