❤
npm
Sign UpSign In

grudus-timepicker

1.0.2 • Public • Published

Grudus Timepicker

npm downloads dependencies dev dependencies license

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:

Normal


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:

brave


But you can also create more user-friendly view - create your own dark theme:

dark


How to get it?

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-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

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

Readme

Keywords

Package Sidebar

Install

npm i grudus-timepicker

Repository

github.com/grudus/Timepicker

Homepage

github.com/grudus/Timepicker#readme

Weekly Downloads

21

Version

1.0.2

License

Apache-2.0

Last publish

Collaborators

  • grudus
Try on RunKit
Report malware