Merge branch 'RHMAP-4770_Display-Required-Date-Time-Format'

feedhenry · May 13, 2016 · e579ba1 · e579ba1
2 parents 7786843 + 3d608da
commit e579ba1
Show file tree

Hide file tree

Showing 8 changed files with 2,742 additions and 87 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog - FeedHenry Javascript SDK
 
+## 2.16.0 - 2016-05-13 - Niall Donnelly
+
+* RHMAP-4770 - Added dateTime custom format rendering and validation.
+
 ## 2.15.3 - 2016-05-10 - Niall Donnelly
 
 * RHMAP-4759 - Added blank option to dropdown field

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fh-js-sdk",
-  "version": "2.15.3",
+  "version": "2.16.0",
   "description": "feedhenry js sdk",
   "main": "dist/feedhenry.js",
   "browser": {

diff --git a/src/appforms/script/sampleData/getForm.json b/src/appforms/script/sampleData/getForm.json
@@ -747,5 +747,117 @@
       }
     },
     "lastUpdatedTimestamp": 1409137112893
+  },
+  "testdatetimeform" :   {
+    "_id": "testdatetimeform",
+    "updatedBy": "[email protected]",
+    "name": "Date Time Form",
+    "createdBy": "[email protected]",
+    "description": "das",
+    "dataTargets": [],
+    "subscribers": [],
+    "pageRules": [],
+    "fieldRules": [],
+    "pages": [
+      {
+        "_id": "5734b98de8155e525e4733e2",
+        "fields": [
+          {
+            "required": true,
+            "type": "dateTime",
+            "name": "datetime",
+            "fieldCode": null,
+            "_id": "datetimefieldwithformat",
+            "adminOnly": false,
+            "fieldOptions": {
+              "validation": {
+                "validateImmediately": true
+              },
+              "definition": {
+                "datetimeUnit": "datetime",
+                "dateTimeFormat": "DD-MM-YYYY HH:mm"
+              }
+            },
+            "repeating": false
+          },
+          {
+            "required": true,
+            "type": "dateTime",
+            "name": "date",
+            "fieldCode": null,
+            "_id": "dateonlyfield",
+            "adminOnly": false,
+            "fieldOptions": {
+              "validation": {
+                "validateImmediately": true
+              },
+              "definition": {
+                "datetimeUnit": "date"
+              }
+            },
+            "repeating": false
+          },
+          {
+            "required": true,
+            "type": "dateTime",
+            "name": "time",
+            "fieldCode": null,
+            "_id": "timeonlyfield",
+            "adminOnly": false,
+            "fieldOptions": {
+              "validation": {
+                "validateImmediately": true
+              },
+              "definition": {
+                "datetimeUnit": "time"
+              }
+            },
+            "repeating": false
+          },
+          {
+            "required": true,
+            "type": "dateTime",
+            "name": "datetime",
+            "fieldCode": null,
+            "_id": "datetimefieldnoformat",
+            "adminOnly": false,
+            "fieldOptions": {
+              "validation": {
+                "validateImmediately": true
+              },
+              "definition": {
+                "datetimeUnit": "datetime"
+              }
+            },
+            "repeating": false
+          }
+        ]
+      }
+    ],
+    "lastUpdated": "2016-05-13T08:10:34.234Z",
+    "dateCreated": "2016-05-12T17:31:22.084Z",
+    "lastDataRefresh": "2016-05-13T08:10:34.234Z",
+    "pageRef": {
+      "5734b98de8155e525e4733e2": 0
+    },
+    "fieldRef": {
+      "datetimefieldwithformat": {
+        "page": 0,
+        "field": 0
+      },
+      "dateonlyfield": {
+        "page": 0,
+        "field": 1
+      },
+      "timeonlyfield": {
+        "page": 0,
+        "field": 2
+      },
+      "datetimefieldnoformat": {
+        "page": 0,
+        "field": 3
+      }
+    },
+    "lastUpdatedTimestamp": 1463127034234
   }
 }
diff --git a/src/appforms/script/sampleData/getForms.json b/src/appforms/script/sampleData/getForms.json
@@ -39,5 +39,13 @@
       "lastUpdated" : "2014-08-27T10:58:32.893Z",
       "lastUpdatedTimestamp" : 1409137112893
     }
+  }, {
+    "testdatetimeform" : {
+      "_id": "testdatetimeform",
+      "name": "Date Time Form",
+      "description": "Form used to test dateTime fields",
+      "lastUpdated": "2016-05-13T08:10:34.234Z",
+      "lastUpdatedTimestamp": 1463127034234
+    }
   }]
 }
diff --git a/src/appforms/src/backbone/040-view02field27dateTime.js b/src/appforms/src/backbone/040-view02field27dateTime.js
@@ -2,16 +2,18 @@ FieldDateTimeView = FieldView.extend({
   extension_type: 'fhdate',
   inputTime: "<input class='fh_appform_field_input col-xs-12 text-center <%= repeatingClassName%>' data-field='<%= fieldId %>' data-index='<%= index %>' type='time'>",
   inputDate: "<input class='fh_appform_field_input col-xs-12 text-center   <%= repeatingClassName%>' data-field='<%= fieldId %>' data-index='<%= index %>' type='date'>",
-  inputDateTime: "<input class='fh_appform_field_input col-xs-12 text-center   <%= repeatingClassName%>' data-field='<%= fieldId %>' data-index='<%= index %>' type='text'>",
+  inputDateTime: "<input class='fh_appform_field_input col-xs-12 text-center   <%= repeatingClassName%>' data-field='<%= fieldId %>' data-index='<%= index %>' placeholder='<%= placeholderText %>' type='text'>",
   renderInput:function(index){
     var fieldId = this.model.getFieldId();
     var repeatingClassName = this.model.isRepeating() ? this.repeatingClassName : this.nonRepeatingClassName;
+    var placeholderText = "";
 
     var unit=this.getUnit();
     var template="";
     var buttonLabel="";
     if (unit==="datetime"){
       template=this.inputDateTime;
+      placeholderText = this.getDateTimeFormat();
       buttonLabel="<i class='icon-calendar'></i> <i class='icon-time'></i>&nbspGet Current Date & Time";
     }else if (unit==="date"){
       template=this.inputDate;
@@ -23,7 +25,8 @@ FieldDateTimeView = FieldView.extend({
     var html=_.template(template)({
       "fieldId":fieldId,
       "index":index,
-      "repeatingClassName": repeatingClassName
+      "repeatingClassName": repeatingClassName,
+      "placeholderText": placeholderText
     });
 
     if(!this.readonly){
@@ -33,6 +36,9 @@ FieldDateTimeView = FieldView.extend({
 
     return $(html);
   },
+  getDateTimeFormat: function(){
+    return this.model.getFieldDefinition().dateTimeFormat || "YYYY-MM-DD HH:mm:ss";
+  },
   getUnit:function(){
     var def=this.model.getFieldDefinition();
     return def.datetimeUnit;
@@ -51,18 +57,29 @@ FieldDateTimeView = FieldView.extend({
     var self = this;
     var now=new Date();
     if (self.getUnit() === "datetime") {
-      $('input[data-index="'+index+'"]', this.$el).val(self.getDate(now)+" "+self.getTime(now)).blur();
+      $('input[data-index="'+index+'"]', this.$el).val(self.generateDateTimeText(now)).blur();
     } else if (self.getUnit() === "date") {
       $('input[data-index="'+index+'"]', this.$el).val(self.getDate(now)).blur();
     } else if (self.getUnit() === "time") {
       $('input[data-index="'+index+'"]', this.$el).val(self.getTime(now)).blur();
     }
   },
+  generateDateTimeText: function(date){
+    return this.replaceTimeText(this.getDateTimeFormat(), date);
+  },
+  replaceTimeText: function(format, d){
+    return format.replace("YYYY",d.getFullYear())
+      .replace("MM",this.twoDigi(d.getMonth()+1))
+      .replace("DD",this.twoDigi(d.getDate()))
+      .replace("HH",this.twoDigi(d.getHours()))
+      .replace("mm",this.twoDigi(d.getMinutes()))
+      .replace("ss",this.twoDigi(d.getSeconds()));
+  },
   getDate:function(d){
-    return "YYYY-MM-DD".replace("YYYY",d.getFullYear()).replace("MM",this.twoDigi(d.getMonth()+1)).replace("DD",this.twoDigi(d.getDate()));
+    return this.replaceTimeText("YYYY-MM-DD", d);
   },
   getTime:function(d){
-    return "HH:mm".replace("HH",this.twoDigi(d.getHours())).replace("mm",this.twoDigi(d.getMinutes()));
+    return this.replaceTimeText("HH:mm:ss", d);
   },
   twoDigi:function(num){
     if (num<10){