1) Made reset button clear custom validation classes.

2) Added an data attribute for the html5Forms.js script tag, data-webforms2-force-js-date-picker, which, when set to "true" will force the js implementation of type="date". This is to work around Chrome's current incomplete implementation of date fields (it doesn't support datetime, the display format is different to what is submitted, etc)
zoltan-dulac · Jul 4, 2012 · 1c665e4 · 1c665e4
1 parent b031db3
commit 1c665e4
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/shared/js/html5Forms.js b/shared/js/html5Forms.js
@@ -55,8 +55,9 @@ var html5Forms = new function () {
 				var inputSupport = Modernizr.inputtypes;
 				/* let's load the supporting scripts according to what is in data-webforms2-support */
 				var supportArray = scriptNode.getAttribute('data-webforms2-support');
-				var forceJSValidation = (scriptNode.getAttribute('data-webforms2-force-js-validation') == 'true');
-				var turnOffValidation = (scriptNode.getAttribute('data-webforms2-turn-off-validation') == 'true');
+				me.forceJSValidation = (scriptNode.getAttribute('data-webforms2-force-js-validation') == 'true');
+				me.turnOffValidation = (scriptNode.getAttribute('data-webforms2-turn-off-validation') == 'true');
+				me.forceJSDatePicker = (scriptNode.getAttribute('data-webforms2-force-js-date-picker') == 'true');
 				if (!supportArray) {
 					return;
 				} else if (trim(supportArray) == 'all') {
@@ -76,12 +77,12 @@ var html5Forms = new function () {
 
 						case "validation":
 						case "autofocus":
-							if (turnOffValidation) {
+							if (me.turnOffValidation) {
 								//me.turnOffNativeValidation();
 								EventHelpers.addPageLoadEvent('html5Forms.turnOffNativeValidation')
 							} else {
 
-								if (!Modernizr.input.required || hasBadValidationImplementation || forceJSValidation) {
+								if (!Modernizr.input.required || hasBadValidationImplementation || me.forceJSValidation) {
 
 									if (isScriptCompressed) {
 										toLoad = toLoad.concat([  
@@ -129,7 +130,7 @@ var html5Forms = new function () {
 
 
 
-							if (!inputSupport.date) {
+							if (!inputSupport.date || me.forceJSDatePicker) {
 								toLoad = toLoad.concat([  
 										  scriptDir + '../../shared/js/jscalendar-1.0/calendar-win2k-1.css',
 										  scriptDir + '../../shared/js/jscalendar-1.0/calendar.js', 
@@ -238,6 +239,7 @@ var html5Forms = new function () {
 			var forms = document.getElementsByTagName('form');
 			for (var i=0; i<forms.length; i++) {
 				EventHelpers.addEvent(forms[i], 'submit', submitEvent);
+				EventHelpers.addEvent(forms[i], 'reset', resetEvent);
 			}
 		}
 
@@ -246,6 +248,11 @@ var html5Forms = new function () {
 			markSubmitAttempt(target);
 		}
 
+		function resetEvent(e) {
+			var target = EventHelpers.getEventTarget(e);
+
+			resetForm(target);
+		}
 		function submitClickEvent(e) {
 			var target = EventHelpers.getEventTarget(e);
 			markSubmitAttempt(target.form);
@@ -255,6 +262,27 @@ var html5Forms = new function () {
 			me.css.addClass(form, 'wf2_submitAttempted');
 		}
 
+		function removeSubmitAttempt(form) {
+			me.css.removeClass(form, 'wf2_submitAttempted');
+		}
+
+		function resetForm(form) {
+			removeSubmitAttempt(form);
+			var nodeNames = ["input", "select", "textarea"];
+			for (var i=0; i<nodeNames.length; i++) {
+				var nodes = form.getElementsByTagName(nodeNames[i]);
+
+				for (var j=0; j<nodes.length; j++) {
+					var node = nodes[j];
+
+					me.css.removeClass(node, 'wf2_lostFocus');
+					me.css.removeClass(node, 'wf2_notBlank');
+					me.css.addClass(node, 'wf2_isBlank');
+				}
+
+			}
+		}
+
 		function setCustomClassesEvents(node) {
 			EventHelpers.addEvent(node, 'keyup', nodeChangeEvent);
 			EventHelpers.addEvent(node, 'change', nodeChangeEvent);

diff --git a/shared/js/html5Widgets.js b/shared/js/html5Widgets.js
@@ -195,7 +195,7 @@ var html5Widgets = new function(){
 				case "datetime-local":
 
 					// check to see if the browser supports the type.
-					if (!inputSupport[elType]) {
+					if (!inputSupport[elType] || (window.html5Forms && html5Forms.forceJSDatePicker)) {
 						me.inputNodes.push(new CalendarElement(formElement, elType));
 					}
 					break;
@@ -509,6 +509,20 @@ var html5Widgets = new function(){
 					break;
 			}
 
+			/*
+			* Chrome, unfortunately, only implements type="date", and it's
+			* implementation displays the data in DD/MM/YYYY format. Even 
+			* though it submits the data in YYYY-MM-DD format, this can
+			* be confusing to users if there is a, say, datetime widget
+			* with a date widget and they show different formats.  In order
+			* to fix this, I change the type to "text" so that it uses the
+			* polyfill instead of the native one.  Note that type="date" 
+			* widgets in Chrome are only changed to type="text" when 
+			* html5Forms.js's script tag has its 
+			* data-webforms2-force-js-date-picker attribute set to "true".
+			*/
+			me.node.type = 'text';
+
 			//me.node.readOnly = true;
 
 

diff --git a/tests/html5Forms/dateTime.html b/tests/html5Forms/dateTime.html
@@ -34,8 +34,14 @@
     		<p>The following shows the various HTML5 date/time widgets in action.
 			Note that at the time of this writing, Opera and some Webkit browsers are the only browser
 			that renders the calendars natively - all the other browsers
-			require <code>html5Widgets</code>.
-			<a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article.</a></p>
+			require <code>html5Widgets</code>.  If you would like, you can 
+			force <code>html5Widgets</code> to render the calendars even if there
+			is a native <code>datetime</code> implementation.  Visit 
+			<a href="dateTime-forcePolyfill.html">this 
+			example to see how it works</a> and why you may want to consider this
+			option.</p>
+
+			<p><a href="http://www.useragentman.com/blog/?p=1110">Back to User Agent Man HTML5 Forms article.</a></p>
     	</div>
 
         <form method="get" action="http://www.useragentman.com/testForm.php">