dtp

Material Design Date-Time Picker

Usage no npm install needed!

<script type="module">
  import dtp from 'https://cdn.skypack.dev/dtp';
</script>

README

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

<link rel="stylesheet" href="path_to/dpt.min.css">
<script src="path_to/dpt.min.js"></script>

Or
Install with NPM

npm i dtp

Add markup

For date-picker

<div class="dtp-date-picker">
    <input type="text" id="DATE_PICKER_ID">
    <div class="dtp-container"></div>
</div>

For time-picker

<div class="dtp-time-picker">
    <input type="text" id="TIME_PICKER_ID">
    <div class="dtp-container"></div>
</div>

Usage

Installed by NPM:

  1. Import CSS file in your SCSS file
@import "~dtp/dist/dtp.min.css"
  1. Import DTP object
//@ts-ignore
import DTP from 'dtp'
  1. Instantiate date-picker
new DTP().datePicker(document.getElementById("DATE_PICKER_ID"));
  1. Instantiate time-picker
new DTP().timePicker(document.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

Shivam Singla

License

This project is licensed under the MIT License - see the LICENSE file for details