Commits

christiansalazar committed 4e54a9a

version 1.0

  • Participants

Comments (0)

Files changed (5)

File ETimePicker.php

+<?php
+/**
+ * ETimePicker
+ *
+ *	Display a input box pair to receive a time from the user.
+ *
+ *	example usage:
+ *	echo CHtml::hiddenField('mytimebox','23:59');
+ *	$this->widget('ext.etimepicker.ETimePicker',array('altField'=>'mytimebox'));
+ *
+ * 
+ * @uses CWidget
+ * @author Christian Salazar H. <christiansalazarh@gmail.com> 
+ * @license NEW BSD 
+ *	Acarigua, Edo.Portuguesa, Venezuela, Dic2012.
+ */
+class ETimePicker extends CWidget {
+
+	public $altField;
+
+	private $_baseUrl;			// usada internamente para los assets
+
+	public function init(){
+		parent::init();
+	}
+
+	public function run(){
+		$this->_prepareAssets();
+		echo 
+"
+<div class='etimepicker' alt='{$this->altField}'>
+	<input type='textbox' class='hour' size=3 maxlength=2 />
+	<span class='sep'>:</span>
+	<input type='textbox' class='minute' size=3 maxlength=2/>
+	<select>
+		<option value='am'>AM</option>
+		<option value='pm'>PM</option>
+	</select>
+</div>
+";
+		$options = CJavaScript::encode(array(
+		));
+		Yii::app()->getClientScript()->registerScript("etimepicker_corescript"
+				,"new ETimePicker({$options})");
+	}// end run()
+
+	public function _prepareAssets(){
+		$localAssetsDir = dirname(__FILE__) . '/assets';
+		$this->_baseUrl = Yii::app()->getAssetManager()->publish(
+				$localAssetsDir);
+        $cs = Yii::app()->getClientScript();
+        $cs->registerCoreScript('jquery');
+		foreach(scandir($localAssetsDir) as $f){
+			$_f = strtolower($f);
+			if(strstr($_f,".swp"))
+				continue;
+			if(strstr($_f,".js"))
+				$cs->registerScriptFile($this->_baseUrl."/".$_f);
+			if(strstr($_f,".css"))
+				$cs->registerCssFile($this->_baseUrl."/".$_f);
+		}
+	}
+}

File ETimePicker.png

Added
New image
+This is a simple widget for your form, whenever you need to get a time from your user, you can insert multiple ETimePicker widgets on the same form. It uses jQuery.
+
+Author:
+**Christian Salazar (bluyell)**, <christiansalazarh@gmail.com>
+
+[http://www.yiiframeworkenespanol.org/wiki](http://www.yiiframeworkenespanol.org/wiki "http://www.yiiframeworkenespanol.org/wiki")
+
+##Screenshot
+
+![Screenshot for ETimePicker](https://bitbucket.org/christiansalazarh/etimepicker/downloads/ETimePicker.png "Screenshot for ETimePicker")
+
+##Requirements
+
+Yii 1.1.12
+jQuery.
+
+##Usage
+
+In your view:
+~~~
+[php]
+	echo $form->hiddenField($model,'yourtimefield');
+	$this->widget('ext.etimepicker.ETimePicker',
+		array('altField'=>'YourModel_yourtimefield'));  // the input ID !
+	echo $form->error($model,'yourtimefield');
+~~~
+
+Your sample model:
+~~~
+[php]
+class YourModel extends CFormModel /*or CActiveRecord !*/ {
+  public $yourtimefield;  // a time field: "hh:mm" formatted (24 hours)
+  ...
+}
+~~~

File assets/etimepicker.css

+div.etimepicker {
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

File assets/etimepicker.js

+/** ETimePicker
+ *  
+ *
+ *	author:	Christian Salazar H. <christiansalazarh@gmail.com>
+ *	licence: NEW BSD. See licence.
+ *	Acarigua, Edo. Portuguesa, Venezuela. Dic2012.
+ */
+var ETimePicker = function(options){
+	function maketime(div){
+		var hour = 1 * div.find('input.hour').val();
+		var min = 1 * div.find('input.minute').val();
+		var ampm = div.find('select').val();
+	
+		if((hour >= 1) && (hour <= 12)){
+			if((min >= 0) && (min <= 59)){
+				if((hour == 12) && (ampm == 'am')){
+					hour = 0;
+				}
+				else 
+				if((hour != 12) && (ampm == 'pm'))
+					hour += 12;
+				if(hour < 10) hour = '0'+jQuery.trim(''+hour);
+				if(min < 10) min = '0'+jQuery.trim(''+min);
+				return jQuery.trim(hour+':'+min);
+			}
+			else
+			return "";
+		}
+		else
+		return "";
+	}
+	$('div.etimepicker').each(function(){
+		var div = $(this);
+		var hour = div.find('input.hour');
+		var min = div.find('input.minute');
+		var ampm = div.find('select');
+		var onChange = function(){
+			$('#'+$(this).parent().attr('alt')).val(maketime($(this).parent()));
+		}
+		hour.change(onChange);
+		min.change(onChange);
+		ampm.change(onChange);
+		var fn = function(){
+			if(	! (
+			  // ((event.keyCode == 190) || (event.keyCode==110)) 	// .
+				(event.keyCode == 8) 	// BACKSPACE
+			|| ((event.keyCode >= 48) && (event.keyCode <= 57))
+			|| ((event.keyCode >= 96) && (event.keyCode <= 105))
+			//|| ((event.keyCode == 189) || (event.keyCode == 109)) // -
+			|| ((event.keyCode == 37) || (event.keyCode == 39))
+			|| ((event.keyCode == 36) || (event.keyCode == 35))
+			|| ((event.keyCode == 45) || (event.keyCode == 46))
+			|| (event.keyCode == 9)
+			))
+			{
+				event.preventDefault();
+				return;
+			}
+			//else alert(event.keyCode);
+		};
+		hour.keydown(fn);
+		min.keydown(fn);
+		var current = jQuery.trim($('#'+div.attr('alt')).val());
+		if(jQuery.trim(current).length > 0){
+			var h="";
+			var m="";
+			var s=1;
+			var e=0;
+			// es una simple maquina de estado finito para leer 
+			// la hora presente. Christian Salazar.
+			$.each(current, function(i,c){
+			if(e==0){
+				if(s==1){
+					if(	(c=='0') || (c=='1') || (c=='2') || (c=='3') || 
+						(c=='4') || (c=='5') || (c=='6') || (c=='7') || 
+						(c=='8') || (c=='9')){
+						h+=c;
+					}
+					else
+					if(c==':'){
+						s=2;
+					}
+					else
+					{ e=1;}
+				}else
+				if(s==2){
+					if(	(c=='0') || (c=='1') || (c=='2') || (c=='3') || 
+						(c=='4') || (c=='5') || (c=='6') || (c=='7') || 
+						(c=='8') || (c=='9')){
+						m+=c;
+					}
+					else
+					{ e=1;}
+				}
+			}});			
+			if(e==0){
+				//
+				h = 1*h;
+				m = 1*m;
+				if(((h >= 0) && (h <= 23)) && ((m >= 0) && (m <= 59))){
+					var _ampm='am';
+					if(h >= 12)
+						_ampm='pm';
+					if(h == 0)
+						h=12;
+					if(h > 12)
+						h -= 12;
+					if(h < 10) h='0'+jQuery.trim(h);
+					if(m < 10) m='0'+jQuery.trim(m);
+					hour.val(h);
+					min.val(m);
+					ampm.val(_ampm);
+				}
+				//
+			}
+		}
+	});
+};