Installation

Setup is very simply - you only need to include css and javascript files inside your html


        <link href="https://rawgit.com/grudus/Timepicker/master/dist/index.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="https://rawgit.com/grudus/Timepicker/master/dist/grudus-timepicker.es5.js"></script>

Or you can download it via npm


        npm install grudus-timepicker [--save]

Remember to include grudus-timepicker.js and index.css file either!

Usage

If you want to hold everything in one big html file, you can do as following:


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

And that's it! It will produce the following output:

Or, you can fire it from javascript file


        <head>
          <link href="path/to/grudus-timepicker/dist/index.css" type="text/css" rel="stylesheet">
        </head>
        <body>
          <button onclick="showMePicker()">Show js picker </button>
        </body>
        <script type="text/javascript" src="myfile.js"></script>


        //myfile.js
        import Timepicker from "path/to/grudus-timepicker/dist/grudus-timepicker.js"

        function showMePicker() {
            Timepicker.showPicker();
        }

It also supports CommonJS modules:


        var Timepicker = require("path/to/grudus-timepicker/dist/grudus-timepicker.umd.js");
        Timepicker.showPicker();

Action

You can set specific action on submit/cancel button clicked


        //myfile.js
        import Timepicker from "path/to/grudus-timepicker/dist/grudus-timepicker.js"

        function showMePicker() {
            Timepicker.showPicker({
                onSubmit: (time) => {alert(`You selected time: ${time.formatted()}`)},
                onCancel: () => {alert("Cancelled")}
            });
        }

Where time object is

{"hours": HH, "minutes": mm, "formatted": function}

You can also use utility format function


    import Timepicker from "path/to/grudus-timepicker/dist/grudus-timepicker.js"

    Timepicker.format({hours: 11, minutes: 1}) // => "11:01"
    Timepicker.format({hours: "2" minutes: "02"}) // => "02:02"
    Timepicker.format(new Date()) // => current time in same format
    Timepicker.format() // => current time in same format

Customization

You can override default options by passing config object as parameter

Initial time

Set initial time by passing time argument. It accepts following formats:


        * Date object,
        * string in format "HH:mm" (with or without leading 0)
        * time object itself {"hours": HH, "minutes": mm}

Custom colors

You can set own color for almost every visible element


            <button onclick="fancyPicker()">Fancy picker</button>
            <input id="selected" value="21:38" title="Selected time" readonly>
            <button onclick="darkPicker()">Dark picker</button>


        //myfile.js
        import Timepicker from "path/to/grudus-timepicker/dist/grudus-timepicker.js"

        function darkPicker() {
            Timepicker.showPicker({
                time: {"hours": 3, "minutes": "05"},
                headerBackground: '#424242',
                headerColor: '#e0e0e0',
                headerSelected: '#fafafa',
                wrapperBackground: "#424242",
                footerBackground: "#424242",
                submitColor: "#F44336",
                cancelColor: "#F44336",
                clockBackground: "#424242",
                clockItemColor: "#fafafa",
                clockItemInnerColor: "#e0e0e0",
                handColor: "#F44336"
            })


        function fancyPicker() {
            Timepicker.showPicker({
                time: document.getElementById("selected").value,
                headerBackground: '#11aadd',
                headerColor: '#abcdef',
                headerSelected: '#ff0fff',
                wrapperBackground: "#720000",
                footerBackground: "#00fa00",
                submitColor: "#ab0923",
                clockBackground: "#1100cc",
                clockItemColor: "#e934fa",
                clockItemInnerColor: "#2bff71",
                handColor: "#f1234f",
                onSubmit: (selected) => {
                    document.getElementById("selected").value = selected.formatted();
                }
            })
}