Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A simple jQuery plug-in that allows users to enter a time of day and optionally select a time from a drop down list.
branch: master
Failed to load latest commit information.
docs/images Adding screenshot for documentation
nuget Adding Nuget Package
.gitignore Adding Nuget Package
README.md Update README.md
index.html Initial Commit
jquery-1.7.1.js Initial Commit
jquery-TimePicker.js Initial Commit

README.md

Introduction

The jQuery TimePicker is a simple plug-in that allows the user to enter a time or optionally select a time of day from a list.

Time Picker

Installation

The jQuery TimePicker is available as a Nuget package.

https://nuget.org/packages/jquery-timepicker

PM> Install-Package jquery-timepicker

Usage

Using standard jQuery syntax, simply select the text input elements that will become time picker controls. In the example below, the startTime element is transformed into a time picker control when the document loads.

CSS

<style type="text/css">

    .timePicker {
        border: 1px solid gray;
        overflow-y: scroll;
        height: 120px;
        width: 180px;
        position: absolute;
        background-color: #fff;
    }

    .timePicker ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .timePicker ul li p {
        padding: 3px;
        margin: 0;
    }

    .timePicker ul li:hover, .timePicker-selected {
        background-color: gray;
        color: #fff;
    }

</style>

HTML

<script src="Scripts/jquery-TimePicker-1.0.0.js" type="text/javascript"></script>
...
...
<input type="text" id="startTime"></input>

SCRIPT

<script type="text/javascript">

    $(function() {

        $("#startTime").timePicker();

    });

</script>

Something went wrong with that request. Please try again.