svn commit: r1851224 - in /ofbiz/ofbiz-framework/trunk/themes/common-theme: template/macro/HtmlFormMacroLibrary.ftl webapp/common/js/util/OfbizUtil.js

[adityasharma]

Author: adityasharma
Date: Mon Jan 14 05:20:37 2019
New Revision: 1851224

URL: http://svn.apache.org/viewvc?rev=1851224&view=rev
Log:
Improved: Replace Inline js with External js in renderDateTimeField macro
(OFBIZ-9848)

Modified:
    ofbiz/ofbiz-framework/trunk/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl
    ofbiz/ofbiz-framework/trunk/themes/common-theme/webapp/common/js/util/OfbizUtil.js

Modified: ofbiz/ofbiz-framework/trunk/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-framework/trunk/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl?rev=1851224&r1=1851223&r2=1851224&view=diff
==============================================================================
--- ofbiz/ofbiz-framework/trunk/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl (original)
+++ ofbiz/ofbiz-framework/trunk/themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl Mon Jan 14 05:20:37 2019
@@ -94,87 +94,16 @@ under the License.
         <#if size?has_content> size="${size}"</#if><#rt/>
         <#if maxlength?has_content>  maxlength="${maxlength}"</#if>
         <#if id?has_content> id="${id}_i18n"</#if>/><#rt/>
+        <#local className = className + " date-time-picker"/>
     </#if>
     <input type="hidden" <#if tabindex?has_content> tabindex="${tabindex}"</#if> name="${name}" <#if event?has_content && action?has_content> ${event}="${action}"</#if> <@renderClass className alert /><#rt/>
       <#if title?has_content> title="${title}"</#if>
       <#if value?has_content> value="${value}"</#if>
       <#if size?has_content> size="${size}"</#if><#rt/>
       <#if maxlength?has_content>  maxlength="${maxlength}"</#if>
+      <#if mask?has_content> data-mask="${mask}"</#if><#rt/>
+      data-shortdate="${shortDateInput?string}"
       <#if id?has_content> id="${id}"</#if>/><#rt/>
-    <#if dateType!="time" >
-      <script type="application/javascript">
-        <#-- If language specific lib is found, use date / time converter else just copy the value fields -->
-        if (Date.CultureInfo != undefined) {
-          var initDate = <#if value?has_content>jQuery("#${id}").val()<#else>""</#if>;
-          if (initDate != "") {
-            var dateFormat = Date.CultureInfo.formatPatterns.shortDate<#if shortDateInput?? && !shortDateInput> + " " + Date.CultureInfo.formatPatterns.longTime</#if>;
-            <#-- The JS date parser doesn't understand the dot before ms in the date/time string. The ms here should be always 000 -->
-            if (initDate.indexOf('.') != -1) {
-              initDate = initDate.substring(0, initDate.indexOf('.'));
-            }
-            jQuery("#${id}").val(initDate);
-            var ofbizTime = "<#if shortDateInput?? && shortDateInput>yyyy-MM-dd<#else>yyyy-MM-dd HH:mm:ss</#if>";
-            var dateObj = Date.parseExact(initDate, ofbizTime);
-            var formatedObj = dateObj.toString(dateFormat);
-            jQuery("#${id}_i18n").val(formatedObj);
-          }
-
-          jQuery("#${id}").change(function() {
-            var ofbizTime = "<#if shortDateInput?? && shortDateInput>yyyy-MM-dd<#else>yyyy-MM-dd HH:mm:ss</#if>";
-            var newValue = ""
-            if (this.value != "") {
-              var dateObj = Date.parseExact(this.value, ofbizTime);
-              var dateFormat = Date.CultureInfo.formatPatterns.shortDate<#if shortDateInput?? && !shortDateInput> + " " + Date.CultureInfo.formatPatterns.longTime</#if>;
-              newValue = dateObj.toString(dateFormat);
-            }
-            jQuery("#${id}_i18n").val(newValue);
-          });
-          jQuery("#${id}_i18n").change(function() {
-            var dateFormat = Date.CultureInfo.formatPatterns.shortDate<#if shortDateInput?? && !shortDateInput> + " " + Date.CultureInfo.formatPatterns.longTime</#if>,
-            newValue = "",
-            dateObj = Date.parseExact(this.value, dateFormat),
-            ofbizTime;
-            if (this.value != "" && dateObj !== null) {
-              ofbizTime = "<#if shortDateInput?? && shortDateInput>yyyy-MM-dd<#else>yyyy-MM-dd HH:mm:ss</#if>";
-              newValue = dateObj.toString(ofbizTime);
-            }
-            else { // invalid input
-              jQuery("#${id}_i18n").val("");
-            }
-            jQuery("#${id}").val(newValue);
-          });
-        } else {
-          <#-- fallback if no language specific js date file is found -->
-          jQuery("#${id}").change(function() {
-          jQuery("#${id}_i18n").val(this.value);
-        });
-        jQuery("#${id}_i18n").change(function() {
-          jQuery("#${id}").val(this.value);
-        });
-      }
-
-      <#if shortDateInput?? && shortDateInput>
-        jQuery("#${id}").datepicker({
-      <#else>
-        jQuery("#${id}").datetimepicker({
-          showSecond: true,
-          <#-- showMillisec: true, -->
-          timeFormat: 'HH:mm:ss',
-          stepHour: 1,
-          stepMinute: 1,
-          stepSecond: 1,
-      </#if>
-          showWeek: true,
-          showOn: 'button',
-          buttonImage: '',
-          buttonText: '',
-          buttonImageOnly: false,
-          dateFormat: 'yy-mm-dd'
-        })
-        <#if mask?has_content>.mask("${mask}")</#if>
-        ;
-      </script>
-    </#if>
     <#if timeDropdown?has_content && timeDropdown=="time-dropdown">
       <select name="${timeHourName}" <#if classString?has_content>class="${classString}"</#if>><#rt/>
         <#if isTwelveHour>

Modified: ofbiz/ofbiz-framework/trunk/themes/common-theme/webapp/common/js/util/OfbizUtil.js
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-framework/trunk/themes/common-theme/webapp/common/js/util/OfbizUtil.js?rev=1851224&r1=1851223&r2=1851224&view=diff
==============================================================================
--- ofbiz/ofbiz-framework/trunk/themes/common-theme/webapp/common/js/util/OfbizUtil.js (original)
+++ ofbiz/ofbiz-framework/trunk/themes/common-theme/webapp/common/js/util/OfbizUtil.js Mon Jan 14 05:20:37 2019
@@ -223,6 +223,108 @@ function bindObservers(bind_element) {
         var element = jQuery(this);
         element.validate();
     });
+
+    jQuery(bind_element).find(".date-time-picker").each(function(){
+        var element = jQuery(this);
+        var id = element.attr("id");
+        var element_i18n = jQuery("#" + id + "_i18n");
+        var shortDate = element.data("shortdate");
+        //If language specific lib is found, use date / time converter else just copy the value fields
+        if (Date.CultureInfo != undefined) {
+            var initDate = element.val();
+            if (initDate != "") {
+                var dateFormat;
+                var ofbizTime;
+                if (shortDate) {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate;
+                    ofbizTime = "yyyy-MM-dd";
+                } else {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
+                    ofbizTime = "yyyy-MM-dd HH:mm:ss"
+                }
+                // The JS date parser doesn't understand the dot before ms in the date/time string. The ms here should be always 000
+                if (initDate.indexOf('.') != -1) {
+                    initDate = initDate.substring(0, initDate.indexOf('.'));
+                }
+                element.val(initDate);
+                var dateObj = Date.parseExact(initDate, ofbizTime);
+                var formatedObj = dateObj.toString(dateFormat);
+                element_i18n.val(formatedObj);
+            }
+
+            element.change(function() {
+                var value = element.val();
+                var dateFormat;
+                var ofbizTime;
+                if (shortDate) {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate;
+                    ofbizTime = "yyyy-MM-dd";
+                } else {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
+                    ofbizTime = "yyyy-MM-dd HH:mm:ss"
+                }
+                var newValue = ""
+                if (value != "") {
+                    var dateObj = Date.parseExact(value, ofbizTime);
+                    newValue = dateObj.toString(dateFormat);
+                }
+                element_i18n.val(newValue);
+            });
+
+            element_i18n.change(function() {
+                var value = element_i18n.val();
+                var dateFormat;
+                var ofbizTime;
+                if (shortDate) {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate;
+                    ofbizTime = "yyyy-MM-dd";
+                } else {
+                    dateFormat = Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.longTime;
+                    ofbizTime = "yyyy-MM-dd HH:mm:ss"
+                }
+                var newValue = "";
+                var dateObj = Date.parseExact(this.value, dateFormat);
+                if (value != "" && dateObj !== null) {
+                    newValue = dateObj.toString(ofbizTime);
+                } else { // invalid input
+                    element_i18n.val("");
+                }
+                element.val(newValue);
+            });
+        } else {
+            //fallback if no language specific js date file is found
+            element.change(function() {
+                element_i18n.val(this.value);
+            });
+            element_i18n.change(function() {
+                element.val(this.value);
+            });
+        }
+        if (shortDate) {
+            element.datepicker({
+                showWeek: true,
+                showOn: 'button',
+                buttonImage: '',
+                buttonText: '',
+                buttonImageOnly: false,
+                dateFormat: 'yy-mm-dd'
+            })
+        } else {
+            element.datetimepicker({
+                showSecond: true,
+                // showMillisec: true,
+                timeFormat: 'HH:mm:ss',
+                stepHour: 1,
+                stepMinute: 1,
+                stepSecond: 1,
+                showOn: 'button',
+                buttonImage: '',
+                buttonText: '',
+                buttonImageOnly: false,
+                dateFormat: 'yy-mm-dd'
+            })
+        }
+    });
 }
 
 /* SelectAll: This utility can be used when we need to use parent and child box combination over any page. Here is the list of tasks it will do: