Material Design Date Time Picker
Material Design Date Time Picker is a simple and easy to use library for Date Picker in web.
Installation
You can either directly download the files or install with npm.
Download :
And include in your HTML directly
Or
Install with NPM
npm i dtp
Add markup
For date-picker
For time-picker
Usage
Installed by NPM:
- Import CSS file in your SCSS file
- Import DTP object
//@ts-ignore
- Instantiate date-picker
new DTP.datePickerdocument.getElementById"DATE_PICKER_ID";
- Instantiate time-picker
new DTP.timePickerdocument.getElementById"TIME_PICKER_ID";
You can apply your own style:
--dtp-primary-light : #ff5c8d;--dtp-primary : #d81b60;--dtp-primary-dark : #a00037; --dtp-theme-surface : #fff;--dtp-theme-gray : rgba(179, 179, 179, 0.2);--dtp-cell-width : 40px;--dtp-cell-height : 40px;
Events
A change event is dispatched when the value of input fields of date-picker and time-picker are changed.
Authors
License
This project is licensed under the MIT License - see the LICENSE file for details