example.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery plugin - Time Setter Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link href="dist/css/jquery.timesetter.css" rel="stylesheet">
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="dist/js/jquery.timesetter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var options1 = {
                hour: {
                    min: 0,
                    max: 24,
                    step: 1,
                    symbol: "hrs"
                },
                minute: {
                    min: 0,
                    max: 60,
                    step: 15,
                    symbol: "mins"
                }
            };

            var timesetterOne = $(".div1").timesetter(options1).setHour(17);
            var timesetterTwo = $(".div2").timesetter().setTotalMinutes(175);

            timesetterOne.change(function (evt) {
                console.log({
                    hours: timesetterOne.getHours(),
                    minutes: timesetterOne.getMinutes()
                });
            });
        });
    </script>
</body>
</html>