Mootime v0.3- Mootools 1.2 Javascript Timepicker

- Troy

v0.3

Here is another transfer from a jquery project I was working on, mootime–a javascript timepicker for mootools 1.2. Installation is simple and there is currently nothing to configure. Just add an input field and call the function “mootime(’id’),” where “id” is the id of the input field. That’s all there is to it.

With mootime, you can add as many timepickers as you need in your web design project, without any conflict. The picker even calculates the section of the window with the most viewable room, and pops up there, so you have a lot of flexibility and don’t have to worry about configuring it for your specific layout.

Demo

See the mootime mootools 1.2 javascript timepicker in action.

Features

Smart Placement - will always pop up in the quadrant with the most visible space.
Faux Memory - hidden input fields provide a fake memory and values to draw from so you don’t have to parse the output.
Resizable - the timepicker layout will hold its form on resize.
Skinnable - Since the timepicker is styled with 100% css, you can easily create a timepicker theme to match your web design.
Multiple Timepickers - Supports multiple mootime choosers on a single page.
Unobtrusive Javascript - there is no inline javascript nor is any injected into your html.
Recent Chooser Always on Top- If you put multiple timepickers next to each other, the most recently clicked input will be on top.

Installation

Install mootools 1.2, then copy and paste the code before the </head> tag in your html file, or save it as a .js and pull it in.

Download mootools 1.2, in my opinion, the best javascript library around.
Upload mootools 1.2 to your server (or workspace). Link to it in the head tag of your html
Place the mootime code between script tags (<script type=”text/javascript”> </script>), before the end of the head tag in your html (or)
Save the javascript code below as mootime.js (or whatever you like) and link to in the head tag (<script src=”/js/mootime.js” type=”text/javascript”>)

Configuration

To create a new timepicker, call “mootime(’id’)” into the domready event. Do this for each input where you want a mootime chooser.

Javascript

Here is the mootime code itself

window.addEvent('domready', function() {
    var mootime = function(timepickerInput) {
	var mootimeID = timepickerInput + "_mootimewrap";
	var mootimeHTML = unescape('%0A%09%09%09%09%3C%64%69%76%20%63%6C%61%73%73%3D%27%74%69%6D%65%70%69%63%6B%65%72%27%3E%0A%09%09%09%09%09%3C%64%69%76%20%63%6C%61%73%73%3D%27%74%69%6D%65%27%3E%0A%09%09%09%09%09%09%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%64%69%73%70%6C%61%79%5F%68%6F%75%72%27%3E%31%32%3C%2F%73%70%61%6E%3E%3A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%64%69%73%70%6C%61%79%5F%6D%69%6E%27%3E%30%3C%2F%73%70%61%6E%3E%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%64%69%73%70%6C%61%79%5F%6D%69%6E%74%77%6F%27%3E%30%3C%2F%73%70%61%6E%3E%0A%09%09%09%09%09%09%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%64%69%73%70%6C%61%79%5F%61%6D%70%6D%27%3E%61%6D%3C%2F%73%70%61%6E%3E%0A%09%09%09%09%09%3C%2F%64%69%76%3E%0A%09%09%09%09%09%0A%09%09%09%09%09%3C%64%69%76%20%63%6C%61%73%73%3D%27%61%6D%6F%72%70%6D%27%3E%0A%09%09%09%09%09%09%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%61%6D%70%6D%20%61%6D%20%6D%6F%6F%74%69%6D%65%61%6D%70%6D%5F%61%63%74%69%76%65%27%3E%61%6D%3C%2F%73%70%61%6E%3E%0A%09%09%09%09%09%09%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%61%6D%70%6D%20%70%6D%27%3E%70%6D%3C%2F%73%70%61%6E%3E%0A%09%09%09%09%09%3C%2F%64%69%76%3E%0A%09%09%09%09%09%0A%09%09%09%09%09%3C%64%69%76%20%63%6C%61%73%73%3D%27%63%6F%6E%74%72%6F%6C%73%27%3E%0A%09%09%09%09%09%09%3C%61%20%63%6C%61%73%73%3D%27%63%6C%6F%73%65%5F%74%69%6D%65%70%69%63%6B%65%72%27%3E%63%6C%6F%73%65%3C%2F%61%3E%26%6E%62%73%70%3B%26%6E%62%73%70%3B%0A%09%09%09%09%09%09%3C%61%20%63%6C%61%73%73%3D%27%73%61%76%65%5F%74%69%6D%65%70%69%63%6B%65%72%27%3E%73%61%76%65%3C%2F%61%3E%20%20%0A%09%09%09%09%09%3C%2F%64%69%76%3E%0A%09%09%09%09%09%0A%09%09%09%09%09%3C%64%69%76%20%63%6C%61%73%73%3D%27%73%65%70%27%3E%3C%2F%64%69%76%3E%20%0A%09%09%09%09%09%0A%09%09%09%09%09%3C%75%6C%20%63%6C%61%73%73%3D%27%68%6F%75%72%73%27%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6C%65%67%65%6E%64%27%3E%68%72%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%31%20%6D%6F%6F%74%69%6D%65%5F%61%63%74%69%76%65%27%3E%3C%73%70%61%6E%3E%31%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%32%27%3E%3C%73%70%61%6E%3E%32%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%33%27%3E%3C%73%70%61%6E%3E%33%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%34%27%3E%3C%73%70%61%6E%3E%34%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%35%27%3E%3C%73%70%61%6E%3E%35%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%36%27%3E%3C%73%70%61%6E%3E%36%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%37%27%3E%3C%73%70%61%6E%3E%37%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%38%27%3E%3C%73%70%61%6E%3E%38%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%39%27%3E%3C%73%70%61%6E%3E%39%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%31%30%27%3E%3C%73%70%61%6E%3E%31%30%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%31%31%27%3E%3C%73%70%61%6E%3E%31%31%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%68%72%73%20%68%72%31%32%27%3E%3C%73%70%61%6E%3E%31%32%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%3C%2F%75%6C%3E%0A%09%09%09%09%09%0A%09%09%09%09%09%3C%75%6C%20%63%6C%61%73%73%3D%27%6D%69%6E%5F%66%69%72%73%74%27%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%6C%65%67%65%6E%64%27%3E%6D%6E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%20%6D%69%6E%30%20%6D%6F%6F%74%69%6D%65%5F%61%63%74%69%76%65%27%3E%3C%73%70%61%6E%3E%30%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%20%6D%69%6E%31%27%3E%3C%73%70%61%6E%3E%31%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%20%6D%69%6E%32%27%3E%3C%73%70%61%6E%3E%32%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%20%6D%69%6E%33%27%3E%3C%73%70%61%6E%3E%33%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%20%6D%69%6E%34%27%3E%3C%73%70%61%6E%3E%34%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%20%6D%69%6E%35%27%3E%3C%73%70%61%6E%3E%35%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%20%0A%09%09%09%09%09%3C%2F%75%6C%3E%0A%09%09%09%09%09%0A%09%09%09%09%09%3C%75%6C%20%63%6C%61%73%73%3D%27%6D%69%6E%5F%73%65%63%6F%6E%64%27%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%30%20%6D%6F%6F%74%69%6D%65%5F%61%63%74%69%76%65%27%3E%30%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%20%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%31%27%3E%3C%73%70%61%6E%3E%31%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%32%27%3E%3C%73%70%61%6E%3E%32%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%33%27%3E%3C%73%70%61%6E%3E%33%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%34%27%3E%3C%73%70%61%6E%3E%34%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%35%27%3E%3C%73%70%61%6E%3E%35%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%36%27%3E%3C%73%70%61%6E%3E%36%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%37%27%3E%3C%73%70%61%6E%3E%37%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%38%27%3E%3C%73%70%61%6E%3E%38%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%09%3C%6C%69%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%20%6D%69%6E%30%39%27%3E%3C%73%70%61%6E%3E%39%3C%2F%73%70%61%6E%3E%3C%2F%6C%69%3E%0A%09%09%09%09%09%3C%2F%75%6C%3E%0A%09%09%09%09%3C%2F%64%69%76%3E%0A%09%09%09%09%0A%09%09%09%09%3C%69%6E%70%75%74%20%74%79%70%65%3D%27%68%69%64%64%65%6E%27%20%63%6C%61%73%73%3D%27%68%6F%75%72%5F%6D%65%6D%6F%72%79%27%20%76%61%6C%75%65%3D%27%31%32%27%3E%0A%09%09%09%09%3C%69%6E%70%75%74%20%74%79%70%65%3D%27%68%69%64%64%65%6E%27%20%63%6C%61%73%73%3D%27%6D%69%6E%5F%6D%65%6D%6F%72%79%27%20%76%61%6C%75%65%3D%27%30%27%3E%0A%09%09%09%09%3C%69%6E%70%75%74%20%74%79%70%65%3D%27%68%69%64%64%65%6E%27%20%63%6C%61%73%73%3D%27%6D%69%6E%74%77%6F%5F%6D%65%6D%6F%72%79%27%20%76%61%6C%75%65%3D%27%30%27%3E%0A%09%09%09%09%3C%69%6E%70%75%74%20%74%79%70%65%3D%27%68%69%64%64%65%6E%27%20%63%6C%61%73%73%3D%27%61%6D%70%6D%5F%6D%65%6D%6F%72%79%27%20%76%61%6C%75%65%3D%27%61%6D%27%3E%0A');
	var newMooTime = new Element('div', {
		'id': mootimeID,
		'class': 'timepickerwrap',
		'html': mootimeHTML
	}); 
 
	newMooTime.inject(timepickerInput, 'after');
	var createMootime = $(timepickerInput + "_mootimewrap");
 
	//shows the timepicker when user focuses on timepicker input field
	$(timepickerInput).addEvent('focus', function(){
		//calculates various positions to decide where to place the timepicker
		var windowSize = $(window).getSize();
		var windowScroll = $(window).getScroll();
		var mootimeInput = $(timepickerInput).getCoordinates();
		var mootimeInputBottom = mootimeInput.bottom;
		var mootimeInputTop = mootimeInput.top;
		var mootimeInputLeft = mootimeInput.left;
		var mootimeInputRight = mootimeInput.right;
		var adjustTopInput = mootimeInputBottom - windowScroll.y;
		var halfWindow = windowSize.y / 2;
		var distanceRight = windowSize.x - mootimeInputRight;
 
		//sets all timepickers back one, so that one can be called to the front on focus
		$$('.timepickerwrap').each(function(item){
			item.setStyle('z-index', '999');
		});
 
		//chooses whether to place the timepicker above or below the input field
		$(createMootime).setStyle('display', 'block');
		var mootimePickerLeft = mootimeInputLeft + 10;
		if (adjustTopInput &lt; halfWindow) {
			var mootimePickerTop = mootimeInputBottom + 10;
			$(createMootime).setStyle('top', mootimePickerTop);
			$(createMootime).setStyle('z-index', '1000');
 
			//chooses wheter to align the timepicker left of right of the input field
			if (mootimeInputLeft &lt; distanceRight) {
				$(createMootime).setStyle('left', mootimePickerLeft);
			}
 
			else {
				var timepickerSize = $(createMootime).getSize();
				var mootimeInputSize = $(timepickerInput).getSize();
				var timepickerLeftLeft = (mootimeInputLeft+ mootimeInputSize.x) - timepickerSize.x;
				$(createMootime).setStyle('left', timepickerLeftLeft);
			};
		}
 
		else {
			var mootimePickerBottom = mootimeInputTop - 10;
			var mootimePickerHeight = $(createMootime).getSize();
			mootimePickerBottom = mootimePickerBottom - mootimePickerHeight.y;
			$(createMootime).setStyle('top', mootimePickerBottom);
			$(createMootime).setStyle('z-index', '1000');
 
			//chooses wheter to align the timepicker left of right of the input field
			if (mootimeInputLeft &lt; distanceRight) {
				$(createMootime).setStyle('left', mootimePickerLeft);
			}
 
			else {
				var timepickerSize = $(createMootime).getSize();
				var mootimeInputSize = $(timepickerInput).getSize();
				var timepickerLeftLeft = (mootimeInputLeft+ mootimeInputSize.x) - timepickerSize.x;
				$(createMootime).setStyle('left', timepickerLeftLeft);
			};
		}
	});
 
	//closes timepicker when user clicks "close"
	$(createMootime).getElement('.close_timepicker').addEvent('click', function(){
		$(createMootime).setStyle('display', 'none');
	});
 
	//removes the current class from current row only
	var removeActive = function(times) {
		$(createMootime).getElements('.' + times).each(function(item, index){
			var currentClass = item.hasClass('mootime_active');
			if (currentClass) {
				item.removeClass('mootime_active');
			}
		});
	};
 
	//applies to the following 4 functions:
	//adds a click event to each time row that changes the clicked number to an active class,
	//removes the active class from the previous current element
	//and sets the time in the upper left display 
 
	//adds click event to hours
	$(createMootime).getElements('.hrs').each(function(item){
		var hour = item.get('text');
		item.addEvent('click', function(){
			$(createMootime).getElement('.display_hour').set('text', hour);
			removeActive('hrs');
			item.addClass('mootime_active');
		});
	});
 
	//adds click event to top minute row
	$(createMootime).getElements('.min').each(function(item){
		var minute = item.get('text');
		item.addEvent('click', function(){
			$(createMootime).getElement('.display_min').set('text', minute);
			removeActive('min');
			item.addClass('mootime_active');
		});
	});
 
	//adds click event to bottom minute row
	$(createMootime).getElements('.mintwo').each(function(item){
		var minuteTwo = item.get('text');
		item.addEvent('click', function(){
			$(createMootime).getElement('.display_mintwo').set('text', minuteTwo);
			removeActive('mintwo');
			item.addClass('mootime_active');
		});
	});
 
	//adds click event to am/pm
	$(createMootime).getElements('.ampm').each(function(item){
		var amPm = item.get('text');
		item.addEvent('click', function(){
			$(createMootime).getElement('.display_ampm').set('text', amPm);
			$(createMootime).getElement('.mootimeampm_active').removeClass('mootimeampm_active');
			item.addClass('mootimeampm_active');
		});
	});
 
	//grabs the current selected time and pushes it into the value property of the mootime input field
	var chosenTime = function() {
		//gets time from the timechooser display
		var hour = $(createMootime).getElement('.display_hour').get('text');
		var min =  $(createMootime).getElement('.display_min').get('text');
		var minTwo =  $(createMootime).getElement('.display_mintwo').get('text');
		var amPm =  $(createMootime).getElement('.display_ampm').get('text');
		var newChosenTime = hour + ':'  + min + minTwo + amPm;
 
		//sets the mootime input field to the time on the timechooser
		$(timepickerInput).setProperty('value', newChosenTime);
 
		//sets memory
		$(createMootime).getElement('.hour_memory').setProperty('value', hour);
		$(createMootime).getElement('.min_memory').setProperty('value', min);
		$(createMootime).getElement('.mintwo_memory').setProperty('value', minTwo);
		$(createMootime).getElement('.ampm_memory').setProperty('value', amPm);
	};
 
	//SAVE
	$(createMootime).getElement('.save_timepicker').addEvent('click', function(){
		chosenTime();
		$(createMootime).setStyle('display', 'none');
	});
 
	//CLOSE
	$(createMootime).getElement('.close_timepicker').addEvent('click', function(){
		//removes active class from rows
		removeActive('hrs');
		removeActive('min');
		removeActive('mintwo');
		$(createMootime).getElement('.mootimeampm_active').removeClass('mootimeampm_active'); 
 
		//grabs saved time from "memory"
		var memoryHour = $(createMootime).getElement('.hour_memory').getProperty('value');
		var memoryMin = $(createMootime).getElement('.min_memory').getProperty('value');
		var memoryMinTwo = $(createMootime).getElement('.mintwo_memory').getProperty('value');
		var memoryAmPm = $(createMootime).getElement('.ampm_memory').getProperty('value');
 
		//resets active class from "memory"
		$(createMootime).getElement("'.hr" + memoryHour + "'").addClass('mootime_active');
		$(createMootime).getElement("'.min" + memoryMin + "'").addClass('mootime_active');
		$(createMootime).getElement("'.min0" + memoryMinTwo + "'").addClass('mootime_active');
		$(createMootime).getElement('.' + memoryAmPm + "'").addClass('mootimeampm_active'); 
 
		//resets timepicker time display from "memory"
		$(createMootime).getElement('.display_hour').setProperty('text', memoryHour);
		$(createMootime).getElement('.display_min').setProperty('text', memoryMin);
		$(createMootime).getElement('.display_mintwo').setProperty('text', memoryMinTwo);
		$(createMootime).getElement('.display_ampm').setProperty('text', memoryAmPm); 
 
		//hides the timepicker
		$(createMootime).setStyle('display', 'none');
	});
};
 
});

To create a new mootime chooser, just call in the mootime function within the domready.

window.addEvent('domready', function() {
    mootime('mootime_inputID');
});

HTML

To add the timepicker to your html, just add an “input” field. Make sure that the “mootime()” function and the input have the same ID. To add another mootime chooser, just add another input field and call another instance of the mootime function.

<input id="mootime_inputID" name="mootime" size="10" type="text" />

Customizing Look and Feel

The time chooser itself is styled with 100% css, so you can create your own css file or just write over the original. The interior size is defined by ems, so its easy to scale it up or down.

The html for the mootime timepicker is encoded in the javascript, but here is what it looks like once it is generated.

<div id="mootime_inputID_mootimewrap" class="timepickerwrap" style="z-index: 1000 display: block top: 40px left: 18px">
 
<div class="timepicker">
 
<div class="time">
	<span class="display_hour">12</span>:<span class="display_min">0</span><span class="display_mintwo">0</span>
	<span class="display_ampm">am</span>
</div>
 
 
<div class="amorpm">
	<span class="ampm am mootimeampm_active">am</span>
	<span class="ampm pm">pm</span>
</div>
 
 
<div class="controls">
	<a class="close_timepicker">close</a>
       <a class="save_timepicker">save</a>
</div>
 
 
<div class="sep">
 
<ul class="hours">
 
	<li class="legend">hr</li>
 
 
	<li class="hrs hr1 mootime_active"><span>1</span></li>
 
 
	<li class="hrs hr2"><span>2</span></li>
 
 
	<li class="hrs hr3"><span>3</span></li>
 
 
	<li class="hrs hr4"><span>4</span></li>
 
 
	<li class="hrs hr5"><span>5</span></li>
 
 
	<li class="hrs hr6"><span>6</span></li>
 
 
	<li class="hrs hr7"><span>7</span></li>
 
 
	<li class="hrs hr8"><span>8</span></li>
 
 
	<li class="hrs hr9"><span>9</span></li>
 
 
	<li class="hrs hr10"><span>10</span></li>
 
 
	<li class="hrs hr11"><span>11</span></li>
 
 
	<li class="hrs hr12"><span>12</span></li>
 
</ul>
 
 
<ul class="min_first">
 
	<li class="minlegend">mn</li>
 
 
	<li class="min min0 mootime_active"><span>0</span></li>
 
 
	<li class="min min1"><span>1</span></li>
 
 
	<li class="min min2"><span>2</span></li>
 
 
	<li class="min min3"><span>3</span></li>
 
 
	<li class="min min4"><span>4</span></li>
 
 
	<li class="min min5"><span>5</span></li>
 
</ul>
 
 
<ul class="min_second">
 
	<li class="mintwo min00 mootime_active">0</li>
 
 
	<li class="mintwo min01"><span>1</span></li>
 
 
	<li class="mintwo min02"><span>2</span></li>
 
 
	<li class="mintwo min03"><span>3</span></li>
 
 
	<li class="mintwo min04"><span>4</span></li>
 
 
	<li class="mintwo min05"><span>5</span></li>
 
 
	<li class="mintwo min06"><span>6</span></li>
 
 
	<li class="mintwo min07"><span>7</span></li>
 
 
	<li class="mintwo min08"><span>8</span></li>
 
 
	<li class="mintwo min09"><span>9</span></li>
 
</ul>
 
</div>
 
<input class="hour_memory" type="hidden" value="12" />
<input class="min_memory" type="hidden" value="0" />
<input class="mintwo_memory" type="hidden" value="0" />
<input class="ampm_memory" type="hidden" value="am" />
</div>
 
</div>

Here is copy of the css file.

/*TIMEPICKER CSS*/
.timepickerwrap ul {
	margin: 0
	padding: 0
}
 
.timepickerwrap a {
	color: blue
	text-decoration: none
	cursor: pointer
}
 
.timepickerwrap .ampm {
	padding: .1em .4em
	cursor: pointer
	display: block
}
 
	.mootimeampm_active {
		color: #ff2400
		font-weight: bold
	}
 
.timepickerwrap a:visited {
	color: blue
}
 
.timepickerwrap a:hover{
	color: #ff2400
}
 
.timepickerwrap .controls {
	float: right
	font-size: 1.1em
}
 
.timepickerwrap {
	font-family: arial, sans-serif
	font-size: 12px !important
	border: 1px solid #cccccc
	padding: .8em 1em 1em 1em
	background-color: white
	position: absolute
	z-index: 1000
	height: auto
	width: auto
	display: none
	color: black
} 
 
.timepickerwrap .timepicker {
	float: left
	width: 26em
}
 
.timepickerwrap div.time {
	padding: .5em
 
	font-size: 1.3em
	border: 1px dotted #cccccc
	float: left
	background-color: white
}
 
.timepickerwrap .amorpm {
	float: left
 
}
 
.timepickerwrap .sep {
	float: left
	width: 100%
	height: 2px
 
}
 
.timepickerwrap .hours, .timepickerwrap .min_first, .timepickerwrap .min_second {
	list-style-type: none
	margin: .6em 0 .3em
	width: 100%
	float: left
	margin-top: .9em
}
 
	.timepickerwrap .hours li {
		display: inline
		font-family: courier new, monospace
		padding: .3em .4em .2em .4em
		margin: 0
		background-color: white
		cursor: pointer
		font-weight: bold
	}
 
	.timepickerwrap .min_first li {
		display: inline
		padding: .3em .4em
		background-color: #ffeedd
		background-color: white
		cursor: pointer
		font-family: courier new, monospace
		font-weight: bold
	}
 
.timepickerwrap .min_second {
	margin-top: .7em
	margin-left: 2.2em
}
 
	.timepickerwrap .min_second li {
		display: inline
		padding: .3em .4em
		background-color: #ffeedd
		background-color: white
		cursor: pointer
		font-family: courier new, monospace
		font-weight: bold
	}
 
.timepickerwrap li.legend, .timepickerwrap li.minlegend {
	background-color: #eeeeee !important
	border: none !important
	color: #333333
}
 
.timepickerwrap li.minlegend {
	padding: .4em .4em .4em .4em !important
}
 
.timepickerwrap .mootime_active {
color: red
}
/* /Notes ========*/
 
/* Example CSS  ========*/
#goin_left {
 
}
 
#goin_right {
float: right
}
 
#goin_down_left {
margin-top: 600px
}
 
#goin_down_right {
float: right
}
/* /Example CSS  ========*/

Notes

Download a zip of all necessary files

*Including the mootools 1.2 core, the ‘mootime’ javascript file, a simple html file and a css file.

As always, you can use Mootime however you like, and please drop me a comment if you use it in your web design project.

Known bugs

There is a slight display difference between ie and ff, with the timechooser covering up a small part of the input field in ie.

This work is dedicated to the Public Domain.

Posted in Mootools 1.2, Web Design

Tags: free download, interface design, javascript, mootools, mootools plugins

Comments (4) Trackbacks (1)

joe
Sunday Sep 21, 8:42 pm

This script is perfect, except I can't work with the 12 hour time. I need it in 24 hour time to insert it into my db.

Any chance we could get a 24 hour version, or somehow display the am/pm 12 hour time to the user, but pass the 24 hour values into the field?
Troy
Tuesday Sep 30, 2:53 pm

It would pretty simple to add something like "if (amPm == 'pm') hour+12" when you are sending the data to the database. The hidden input fields make it pretty easy to manipulate. Hope this helps.
Ranjit
Tuesday Feb 03, 10:24 pm

Thanks a lot friend !!

Its very simple and easy to use script !!

;)
jy
Monday May 25, 1:59 pm

Best of the best. Wonderfull tool, well explained !
Thank you.

Categories

Archives

Recommended reading: