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!
By default picker uses blue-white theme:
But you can change its colors by overriding some of default configuration:
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:
You can include all in single html file! Just add
<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
npm install --save grudus-timepickerThen, 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
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