grudus-timepicker
Version:
Material design time picker in pure Javascript without any dependencies
92 lines (68 loc) • 3.06 kB
Markdown
# 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:
<br/>
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"
};
````
<br/>
How custom theme can look:
<br/>
<br/>
But you can also create more user-friendly view - create your own dark theme:
<br/>
<br />
## How to get it?
You can include all in single `html` file! Just add
````html
<head>
<link href="https://rawgit.com/grudus/Timepicker/master/dist/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<button onclick="Timepicker.showPicker()">Show picker</button>
</body>
<script type="text/javascript" src="https://rawgit.com/grudus/Timepicker/master/dist/grudus-timepicker.es5.js"></script>
````
Or, you can download it from npm
````bash
npm install --save grudus-timepicker
````
Then, include `index.css` into your project (e.g. add
`<link href="node_modules/grudus-timepicker/dist/index.css" rel="stylesheet" type="text/css">` 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)