TimePicker Script with jQuery Plugin

(No Ratings Yet)

Loading ...

2,664 views

A time picker for jQuery. list version | table version. Requires below plugin for correct positioning. There is also another version (not by me) that has a few extra features and a demo of it working with the datePicker plugin.

This is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Designed from the ground up to be flexible and extensible, the date picker can be used in unlimited ways to allow you to add calendar widgets to your pages.

Usage

Simply reference the relevant files at the head of your page like so:

<!-- jQuery -->
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>

<!-- required plugins -->
<script type="text/javascript" src="scripts/date.js"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script>< ![endif]-->

<!-- jquery.datePicker.js -->
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>

(note that I am using IE’s conditional compilation to include the bgiframe plugin as it isn’t necessary for other browsers so it seems pointless for them to download it)

Then simply instantiate the date picker as you like – see the demos below for inspiration…

Demo: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html
Download: http://jqueryjs.googlecode.com/svn/trunk/plugins/timepicker/jquery.timepicker-list.js
http://jqueryjs.googlecode.com/svn/trunk/plugins/timepicker/jquery.timepicker-table.js
Source: http://www.texotela.co.uk/code/jquery/timepicker/

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

jQuery Date Picker Script This is an clean, unobtrusive plugin for jQuery which allows...
JQuery Calendar Hot Script The jQuery Datepicker project has been donated to the jQuery...
jTimepicker jQuery Time Picker Plugin jTimepicker is a jQuery plugin for set hours and minutes individually...
DatePicker v4 Ajax Script My 3rd and final attempt writing a datePicker (calendar) that...
ClockPick – JQuery Plugin ClockPick – A JQuery plugin that enables you to add...

Do you like this post?

1 Comment »

jb0t Says:
July 21st, 2009 at 5:36 pm

I have implemented this utility, though I have found something odd which seems to be a bad bug. When click on the form field, and immediately hit enter Firefox 3.5 spins out of control and asks if you want to stop the loop occurring in the jquery lib. Here is an example of how i am using it dynamically throughout my code using a framework (so it has a bit of redundancy)

[X]

//<![CDATA[
$(function(){
$("#id_end_date_1").timePicker({show24Hours:false,step:15,startTime:new Date(0, 0, 0, 6, 0, 0),endTime:new Date(0, 0, 0, 23, 45, 0)});
})

RSS feed for comments on this post. TrackBack URL