# Grudus Timepicker
Material design timepicker written in Javascript (without any external dependencies - **no jQuery, no Bootstrap, only one file!**)
See https://grudus.github.io/Timepicker/ for more usage!
## How it looks?
By default picker uses blue-white theme:
But you can change its colors by overriding some of default configuration:
````javascript
defaultConfig = {
headerBackground: "#1976D2",
headerColor: "#c7d6e1",
headerSelected: "#ffffff",
wrapperBackground: "#f0fff0",
footerBackground: "#f0fff0",
submitColor: "#1976D2",
cancelColor: "#1976D2",
clockBackground: "#CFD8DC",
clockItemColor: "#212121",
clockItemInnerColor: "#212121",
handColor: "#1976D2"
};
````
How custom theme can look:
But you can also create more user-friendly view - create your own dark theme:
## How to get it?
You can include all in single `html` file! Just add
````html
````
Or, you can download it from npm
````bash
npm install --save grudus-timepicker
````
Then, include `index.css` into your project (e.g. add
`` into your html file)
And lastly, somewhere in your code put
````javascript
import Timepicker from "path/to/grudus-timepicker/dist/grudus-timepicker.js";
// ...
Timepicker.showPicker({
time: new Date(),
onSubmit: (time) => {
//some action ...
},
headerColor: "#ff0000"
// more color configuration ...
})
````
You can set initial time by passing `time` field in argument. `time` may be a `Date` object, an object `{hours: 12, minutes: 44}` or a string in format `HH:mm`. If you want to learn more, visit [customization section](https://grudus.github.io/Timepicker/#customization)