Removed the ugly time setting pop-up and replaced it with clean JS. Fixes bug #12061

docs/changelog/7.x.x.txt

@@ -5,6 +5,7 @@
  - fixed #12062: Thingy: column headers missing from exported file
  - fixed #12063: Return URL from export doesn't work on non-default Thingy's
  - fixed #12054: Thingy: Time fields and formatting
+ - fixed #12061: TimeField form plugin doesn't work with all names.
 
 7.10.10
  - fixed #12035: Story Manager - make keywords from Story view work

docs/gotcha.txt

@@ -14,6 +14,9 @@ save you many hours of grief.
     * The updated versions of HTML::Packer, JavaScript::Packer and CSS::Packer
       added for 7.10.9 require perl 5.8.9 or higher to run.
 
+    * Modified TimeField, now provides popupless immediate validation with
+      an alert if the value is not interpretable when the user leaves that field
+
 7.10.9
 --------------------------------------------------------------------
     * WebGUI now depends on Data::ICal for making and reading iCal feeds

lib/WebGUI/Form/TimeField.pm

@@ -192,6 +192,7 @@ Set the head tags for this form plugin
 sub headTags {
     my $self = shift;
 	$self->session->style->setScript($self->session->url->extras('inputCheck.js'),{ type=>'text/javascript' });
+	$self->session->style->setScript($self->session->url->extras('form/timefield.js'),{ type=>'text/javascript' });
 }
 
 #-------------------------------------------------------------------
@@ -218,14 +219,9 @@ sub toHtml {
     my $self = shift;
 	##JS expects formatted time
     $self->set('value', $self->getValueAsHtml);
-	my $i18n = WebGUI::International->new($self->session);
-	$self->set("extras", $self->get('extras') . ' onkeyup="doInputCheck(document.getElementById(\''.$self->get("id").'\'),\'0123456789:\')"');
-	return $self->SUPER::toHtml
-		.WebGUI::Form::Button->new($self->session,
-			id=>$self->get('id'),
-			extras=>'style="font-size: 8pt;" onclick="window.timeField = this.form.'.$self->get("name").';clockSet = window.open(\''.$self->session->url->extras('timeChooser.html').'\',\'timeChooser\',\'WIDTH=230,HEIGHT=100\');return false"',
-			value=>$i18n->get(970)
-			)->toHtml;
+	#my $i18n = WebGUI::International->new($self->session);
+	$self->set("extras", $self->get('extras') . ' onblur="WebGUI.TimeField.munge(document.getElementById(\''.$self->get("id").'\'))" onkeyup="WebGUI.TimeField.check(document.getElementById(\''.$self->get("id").'\'));"');
+	return $self->SUPER::toHtml;
 }
 
 #-------------------------------------------------------------------

www/extras/form/timefield.js

@@ -0,0 +1,85 @@
+
+/*** The WebGUI Asset Manager 
+ * Requires: YAHOO, Dom, Event
+ *
+ */
+
+if ( typeof WebGUI == "undefined" ) {
+    WebGUI  = {};
+}
+if ( typeof WebGUI.TimeField == "undefined" ) {
+    WebGUI.TimeField = {};
+}
+
+WebGUI.TimeField.init = function (o) {
+    WebGUI.TimeField.i18n
+    = new WebGUI.i18n( { 
+            namespaces  : {
+                'Form_TimeField' : [
+                    "invalid time"
+                ]
+            }
+        } );
+}
+
+WebGUI.TimeField.check = function( field ) {
+    var timePattern = /^(\d{1,2})(:)?(\d{1,2})?(:)?(\d{1,2})?$/;
+    var matchArray = field.value.match( timePattern );
+    if( matchArray == null )
+        return this.reject( field );
+
+    hour = matchArray[1];
+    minute = matchArray[3];
+    second = matchArray[5];
+    
+    if( hour < 0  || hour > 23 )
+        return this.reject( field );
+        
+    if( minute != null && ( minute < 0 || minute > 59 ) )
+        return this.reject( field );
+        
+    if( second != null && ( second < 0 || second > 59 ) )
+        return this.reject( field );
+    
+    return this.accept( field );
+}
+
+WebGUI.TimeField.reject = function( field ) {
+    field.style.backgroundColor = "DarkSalmon";
+    return false;
+}
+
+WebGUI.TimeField.accept = function( field ) { 
+    field.style.backgroundColor = "";
+    return false;
+}
+
+WebGUI.TimeField.munge = function( field ) { 
+    var date = new Date( "01/01/01 " + field.value );
+    var hour   = date.getHours();
+    var minute = date.getMinutes();
+    var second = date.getSeconds();
+    //var ap = "AM";
+    //if (hour   > 11) { ap = "PM";             }
+    //if (hour   > 12) { hour = hour - 12;      }
+    //if (hour   == 0) { hour = 12;             }
+    if (hour   < 10) { hour   = "0" + hour;   }
+    if (minute < 10) { minute = "0" + minute; }
+    if (second < 10) { second = "0" + second; }
+    field.value = hour + ':' + minute + ':' + second; // + " " +ap;
+    
+    if( field.value.indexOf("NaN") != -1 ) {
+        field.value = "12:00:00";
+        alert( WebGUI.TimeField.i18n.get('Form_TimeField', 'invalid time') );
+        window.setTimeout( function() {
+            field.focus();
+            field.select();
+            }, 1 );
+    }
+    
+    field.style.backgroundColor = ""
+    
+    return false;
+}
+
+WebGUI.TimeField.init();