qcTimepicker Demo

author(s): Vincent Diep

by javajack

HTML

<script src="https://cdn.rawgit.com/RinkAttendant6/qcTimepicker/v1.1.0/build/qcTimepicker.min.js"></script>
<meta charset=utf-8>
<div>
    <style scoped>
        @import url('demo.css');
    </style>
    
    <a href='https://github.com/RinkAttendant6/qcTimepicker'><img id='github-ribbon' src='https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png'></a>

    <h1>qcTimepicker</h1>

    <p>Simple jQuery dropdown timepicker. Small, accessible, and highly customizable.</p>
    <p>Requires jQuery 1.2+. Compatible with all modern browsers and IE 7+.</p>

    <section>
        <h2>Demo</h2>

        <section id='demo-basic'>
            <h3>Basic usage</h3>

            <p>
                <label for='demo-basic-1'>Time:</label> <input type='time' class='timepicker' id='demo-basic-1' required>
            </p>
        </section>

        <section id='demo-custom-range'>
            <h3>Custom time range</h3>
            
            <p>The <code>min</code> and <code>max</code> attributes on the element restricts the range.</p>

            <p>
                <label for='demo-custom-range-1'>Afternoon:</label> <input type='time' class='timepicker' id='demo-custom-range-1' required min='08:30' max='15:30'>
            </p>
        </section>

        <section id='demo-custom-intervals'>
            <h3>Custom intervals</h3>
            
            <p>The <code>step</code> attribute on the element defines the intervals between times.</p>

            <p>
                <label for='demo-custom-intervals-1'>Hour-and-a-half:</label> <input type='time' class='timepicker' id='demo-custom-intervals-1' required min='08:30' max='15:30' step='5400'>
            </p>
        </section>

       ...

CSS

:root {
    font-family: 'Segoe UI', Ubuntu, Tahoma, Arial, sans-serif;
    background-color: #06b;
}

body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    width: 90%;
    background-color: #fff;
    padding: 1em;
    border: 0 solid #000;
    border-width: 0 medium;
    position: relative;
}

#github-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
}

code {
    font-family: Consolas, monospace;
    font-size: 0.9em;
    margin: auto 0.125em;
    padding: 0 0.25em;
    background-color: #e6e6e6;
}

.small {
    font-size: 0.8em;
}

JavaScript

$(document).ready(function() {
    $('.timepicker', '#demo-basic').qcTimepicker();

    $('.timepicker', '#demo-custom-range').qcTimepicker();

    $('.timepicker', '#demo-custom-intervals').qcTimepicker();

    $('#demo-custom-formats-1').qcTimepicker({
        format: 'h:mm a'
    });

    $('#demo-custom-formats-2').qcTimepicker({
        format: 'h:mm:ss a'
    });

    $('.timepicker', '#demo-placeholder').qcTimepicker();
});