Seattle web design, development and marketing: consider the possibilites

Mootime v0.3- Mootools 1.2 Javascript Timepicker

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.

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

This entry was posted on Thursday, July 17th, 2008 at 2:12 pm and is filed under Mootools 1.2, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Mootime v0.3- Mootools 1.2 Javascript Timepicker”

links for 2008-07-19 | iKeif - mootools, jquery, social media and a ton of links says:

July 19, 2008 at 9:55 am

[...] things 13 hours agoThings They Don’t Tell You (But Should)Mootime – Mootools 1.2 Javascript Timepicker — consider: open blog | Web Design, Development and Ma… 13 hours agoInteresting – a mootools time and date picker.Developer’s Guide – AJAX Libraries API – [...]

Reply
joe says:

September 21, 2008 at 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?

Reply
Troy says:

September 30, 2008 at 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.

Reply
Ranjit says:

February 3, 2009 at 10:24 pm

Thanks a lot friend !!

Its very simple and easy to use script !!

Reply
jy says:

May 25, 2009 at 1:59 pm

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

Reply
Mike Fonner says:

August 13, 2009 at 6:17 am

Looks Great ! Easiest picker to use that I’ve found yet. Question ? Would like to change am pm to caps (AM PM). Is this possible ??
Thanks,
mike…

Reply
Aashish says:

November 8, 2009 at 10:42 pm

hi, I am designing a datepicker. I want to send picture about how it looks. can u send your mailid.
I want want some help.

Reply
Mootime TimePicker ???? ??? ?? ??? | ? ????? ?? ? ??? ?? ??? - WebStoryMaker says:

January 7, 2010 at 10:40 am

[...] ???? ???? [...]

Reply
Damaso Perez says:

February 9, 2010 at 10:43 am

primeramente un saludo y una felicitacion por esta pagina esta muy bonita y por el mootime que esta super.

en español: hola quisiera sabe como cambiar los botones de save y close por guardar y cerrar.

in english: hi i want to know how to change the save and close buttons for guardar y cerrar.

thanks.

Reply
MooTime...need help finding variable - TalkPHP says:

April 4, 2010 at 2:34 pm

[...] help finding variable I am using this mootools time picker on my site mootime…i already have a date picker on my site…and i have it so once you have chosen the date and [...]

Reply

Individual and
Team Mootools
training.

Contact Us

Our Services

Design

Development

Marketing

Client Testimonials

Mootime v0.3- Mootools 1.2 Javascript Timepicker

v0.3

Demo

Features

Installation

Configuration

Javascript

HTML

Customizing Look and Feel

Notes

Download a zip of all necessary files

Known bugs

10 Responses to “Mootime v0.3- Mootools 1.2 Javascript Timepicker”

Leave a Reply

Individual and Team Mootools training.

Contact Us

Article Categories

Our Services

Design

Development

Marketing

Client Testimonials

Mootime v0.3- Mootools 1.2 Javascript Timepicker

v0.3

Demo

Features

Installation

Configuration

Javascript

HTML

Customizing Look and Feel

Notes

Download a zip of all necessary files

Known bugs

10 Responses to “Mootime v0.3- Mootools 1.2 Javascript Timepicker”

Leave a Reply

Individual and
Team Mootools
training.