inputMask military time

[maple_shaft]

Hi Forum,

If you are anything like me, you are eagerly looking forward to the new time picker component coming in 3.0.

I thought I would share a simple and rudimentary method of using an inputMask to ensure military time input.

Code: Select all

<h:outputText value="Time: *" />
					<p:inputMask id="visitTime" widgetVar="vTime" mask="99:99"></p:inputMask>
					<h:outputText value="Military (24hr time)" />

Code: Select all

<script type="text/javascript">
//<![CDATA[
	
    jQuery(document).ready(function () {
    	vTime.jq.blur(function(evt) {
    		blurTime();
    	});  	
    });
    
	function blurTime() {
		var vTimeAlt = document.getElementById('form1:visitTime');
		var currentValue = vTimeAlt.value;
		
		if (currentValue == undefined || currentValue == '') {
			return;
		}
		
		while (currentValue.search('_') != -1) {
			currentValue = currentValue.replace('_', '0');
		}
		
		var hrStr = currentValue.split(':')[0];
		var mtStr = currentValue.split(':')[1];
		var hrNum = new Number(hrStr);
		var mtNum = new Number(mtStr);
		if (hrNum > 23) {
			hrNum = 23;
		}
		if (mtNum > 59) {
			mtNum = 59;
		}
		
		hrStr = hrNum + '';
		mtStr = mtNum + '';
		if (hrStr.length == 1) {
			hrStr = '0' + hrStr;
		}
		if (mtStr.length == 1) {
			mtStr = '0' + mtStr;
		}
		
		var newValue = hrStr + ':' + mtStr;
		vTimeAlt.value = newValue;
	}	
         
//]]>
</script>

I left seconds out because I personally don't need them for this application I am working on, but it should be straightforward how to add seconds.

Further this field can be bound to a bean, possibly with a date value utilizing a converter.

Let me know if you can think of a better way.