Atlas-4062: UI:- Classification Daterange Picker Datetime format fix.

dashboardv2/public/css/scss/override.scss

@@ -521,6 +521,14 @@ div.columnmanager-dropdown-container {
     }
 }
 
+.modal {
+    position: absolute;
+}
+
+.modal-open {
+    overflow-y: auto;
+}
+
 .daterangepicker {
     max-height: 400px;
     overflow-y: scroll;

dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html

@@ -16,16 +16,16 @@
 -->
 <div class="form-group clearfix">
     <div class="col-sm-4">
-        <label for="">Start Time</label>
-        <input type="text" class="form-control" name="startTime" data-id="startTime" readonly />
+        <label class="col-sm-12 required" for="">Start Time</label>
+        <input type="text" class="form-control start-time" name="startTime" data-id="startTime" readonly />
     </div>
     <div class="col-sm-4">
-        <label for="">End Time</label>
-        <input type="text" class="form-control" name="endTime" data-id="endTime" readonly />
+        <label class="col-sm-12 required" for="">End Time</label>
+        <input type="text" class="form-control end-time" name="endTime" data-id="endTime" readonly />
     </div>
     <div class="col-sm-3">
-        <label for="">TimeZone</label>
-        <select class="form-control row-margin-bottom" data-id="timeZone" required>
+        <label class="col-sm-12 required" for="">TimeZone</label>
+        <select class="form-control row-margin-bottom time-zone" data-id="timeZone" required>
         </select>
     </div>
     <div class="col-sm-1 attributePlusData" align="right" style="margin-top: 25px;">

dashboardv2/public/js/views/tag/AddTagModalView.js

@@ -136,6 +136,12 @@ define(['require',
             this.modal.open();
             this.modal.$el.find('button.ok').attr("disabled", true);
             this.on('ok', function() {
+                if (this.validateValues()) {
+                    if (this.hideLoader) {
+                        this.hideLoader();
+                    };
+                    return;
+                };
                 that.modal.$el.find('button.ok').showButtonLoader();
                 var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(),
                     tagAttributes = {},
@@ -247,6 +253,33 @@ define(['require',
             });
             this.bindEvents();
         },
+        validateValues: function(attributeDefs) {
+            var isValidate = true,
+                applyErrorClass = function(scope) {
+                    if (this.value == '' || this.value == null || this.value.indexOf('Select Timezone') > -1) {
+                        $(this).addClass('errorValidate');
+                        if (isValidate) { isValidate = false; }
+                    } else {
+                        $(this).removeClass('errorValidate');
+                    }
+                };
+
+            this.$el.find('.start-time').each(function(element) {
+                applyErrorClass.call(this);
+            });
+            this.$el.find('.end-time').each(function(element) {
+                applyErrorClass.call(this);
+            });
+            this.$el.find('.time-zone').each(function(element) {
+                applyErrorClass.call(this);
+            });
+            if (!isValidate) {
+                Utils.notifyInfo({
+                    content: "Please fill the details"
+                });
+                return true;
+            }
+        },
 
         onRender: function() {
             var that = this;

dashboardv2/public/js/views/tag/AddTimezoneItemView.js

@@ -47,11 +47,11 @@ define(['require',
                 var events = {},
                     that = this;
                 events["change " + this.ui.startTime] = function(e) {
-                    this.model.set({ "startTime": this.ui.startTime.val() });
+                    this.model.set({ "startTime": that.getDateFormat(this.ui.startTime.val()) });
                     this.buttonActive({ isButtonActive: true });
                 };
                 events["change " + this.ui.endTime] = function(e) {
-                    this.model.set({ "endTime": this.ui.endTime.val() });
+                    this.model.set({ "endTime": that.getDateFormat(this.ui.endTime.val()) });
                     this.buttonActive({ isButtonActive: true });
                 };
                 events["change " + this.ui.timeZone] = function(e) {
@@ -76,7 +76,7 @@ define(['require',
                         "singleDatePicker": true,
                         "showDropdowns": true,
                         "timePicker": true,
-                        "timePicker24Hour": true,
+                        "timePicker24Hour": Globals.dateTimeFormat.indexOf("hh") > -1 ? false : true,
                         "timePickerSeconds": true,
                         "startDate": new Date(),
                         "autoApply": true,
@@ -99,38 +99,47 @@ define(['require',
                         startDateObj["autoUpdateInput"] = false;
                     } else {
                         startDateObj["autoUpdateInput"] = true;
-                        startDateObj["startDate"] = this.model.get('startTime');
+                        startDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false });
                     }
                     if (_.isEmpty(this.model.get('endTime'))) {
                         endDateObj["autoUpdateInput"] = false;
-                        endDateObj["minDate"] = this.model.get('startTime');
+                        endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false });
                     } else {
                         endDateObj["autoUpdateInput"] = true;
-                        endDateObj["minDate"] = this.model.get('startTime');
-                        endDateObj["startDate"] = this.model.get('endTime');
+                        endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false });
+                        endDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('endTime')), zone: false });
                     }
                     if (!_.isEmpty(this.model.get('timeZone'))) {
                         this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true });
                     }
                 } else {
-                    this.model.set('startTime', that.ui.startTime.val());
-                    this.model.set('endTime', that.ui.endTime.val());
+                    this.model.set('startTime', that.getDateFormat(that.ui.startTime.val()));
+                    this.model.set('endTime', that.getDateFormat(that.ui.endTime.val()));
                 }
                 this.ui.startTime.daterangepicker(startDateObj).on('apply.daterangepicker', function(ev, picker) {
                     that.ui.startTime.val(Utils.formatDate({ date: picker.startDate, zone: false }));
                     _.extend(endDateObj, { "minDate": that.ui.startTime.val() })
                     that.endDateInitialize(endDateObj);
-                    that.model.set('startTime', that.ui.startTime.val());
+                    that.model.set('startTime', that.getDateFormat(that.ui.startTime.val()));
                     that.buttonActive({ isButtonActive: true });
                 }).on('cancel.daterangepicker', function(ev, picker) {
                     that.ui.startTime.val('');
                     delete endDateObj.minDate;
                     that.endDateInitialize(endDateObj);
-                    that.model.set('startTime', that.ui.startTime.val());
+                    that.model.set('startTime', that.getDateFormat(that.ui.startTime.val()));
                 });
                 this.endDateInitialize(endDateObj);
                 this.buttonActive({ isButtonActive: true });
             },
+            getDateFormat: function(option) {
+                if (option && option.length) {
+                    if (Globals.dateTimeFormat.indexOf("HH") > -1) {
+                        option = option.slice(0, -3); // remove AM/PM from 24hr format
+                    }
+                    return moment(Date.parse(option)).format('YYYY/MM/DD HH:mm:ss');
+                }
+                return "";
+            },
             buttonActive: function(option) {
                 var that = this;
                 if (option && option.isButtonActive && that.tagModel) {
@@ -154,11 +163,11 @@ define(['require',
                 var that = this;
                 this.ui.endTime.daterangepicker(option).on('apply.daterangepicker', function(ev, picker) {
                     that.ui.endTime.val(Utils.formatDate({ date: picker.startDate, zone: false }));
-                    that.model.set('endTime', that.ui.endTime.val());
+                    that.model.set('endTime', that.getDateFormat(that.ui.endTime.val()));
                     that.buttonActive({ isButtonActive: true });
                 }).on('cancel.daterangepicker', function(ev, picker) {
                     that.ui.endTime.val('');
-                    that.model.set('endTime', that.ui.endTime.val());
+                    that.model.set('endTime', that.getDateFormat(that.ui.endTime.val()));
                 });
             }
         });

dashboardv3/public/css/scss/override.scss

@@ -525,6 +525,14 @@ div.columnmanager-dropdown-container {
     }
 }
 
+.modal {
+    position: absolute;
+}
+
+.modal-open {
+    overflow-y: auto;
+}
+
 .daterangepicker {
 
     .ranges {

dashboardv3/public/js/templates/tag/AddTimezoneView_tmpl.html

@@ -16,16 +16,16 @@
 -->
 <div class="form-group clearfix">
     <div class="col-sm-4">
-        <label for="">Start Time</label>
-        <input type="text" class="form-control" name="startTime" data-id="startTime" readonly />
+        <label class="col-sm-12 required" for="">Start Time</label>
+        <input type="text" class="form-control start-time" name="startTime" data-id="startTime" readonly />
     </div>
     <div class="col-sm-4">
-        <label for="">End Time</label>
-        <input type="text" class="form-control" name="endTime" data-id="endTime" readonly />
+        <label class="col-sm-12 required" for="">End Time</label>
+        <input type="text" class="form-control end-time" name="endTime" data-id="endTime" readonly />
     </div>
     <div class="col-sm-3">
-        <label for="">TimeZone</label>
-        <select class="form-control row-margin-bottom" data-id="timeZone" required>
+        <label class="col-sm-12 required" for="">TimeZone</label>
+        <select class="form-control row-margin-bottom time-zone" data-id="timeZone" required>
         </select>
     </div>
     <div class="col-sm-1 attributePlusData" align="right" style="margin-top: 25px;">

dashboardv3/public/js/views/tag/AddTagModalView.js

@@ -136,6 +136,12 @@ define(['require',
             this.modal.open();
             this.modal.$el.find('button.ok').attr("disabled", true);
             this.on('ok', function() {
+                if (this.validateValues()) {
+                    if (this.hideLoader) {
+                        this.hideLoader();
+                    };
+                    return;
+                };
                 that.modal.$el.find('button.ok').showButtonLoader();
                 var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(),
                     tagAttributes = {},
@@ -247,6 +253,33 @@ define(['require',
             });
             this.bindEvents();
         },
+        validateValues: function(attributeDefs) {
+            var isValidate = true,
+                applyErrorClass = function(scope) {
+                    if (this.value == '' || this.value == null || this.value.indexOf('Select Timezone') > -1) {
+                        $(this).addClass('errorValidate');
+                        if (isValidate) { isValidate = false; }
+                    } else {
+                        $(this).removeClass('errorValidate');
+                    }
+                };
+
+            this.$el.find('.start-time').each(function(element) {
+                applyErrorClass.call(this);
+            });
+            this.$el.find('.end-time').each(function(element) {
+                applyErrorClass.call(this);
+            });
+            this.$el.find('.time-zone').each(function(element) {
+                applyErrorClass.call(this);
+            });
+            if (!isValidate) {
+                Utils.notifyInfo({
+                    content: "Please fill the details"
+                });
+                return true;
+            }
+        },
 
         onRender: function() {
             var that = this;

dashboardv3/public/js/views/tag/AddTimezoneItemView.js

@@ -47,11 +47,11 @@ define(['require',
                 var events = {},
                     that = this;
                 events["change " + this.ui.startTime] = function(e) {
-                    this.model.set({ "startTime": this.ui.startTime.val() });
+                    this.model.set({ "startTime": that.getDateFormat(this.ui.startTime.val()) });
                     this.buttonActive({ isButtonActive: true });
                 };
                 events["change " + this.ui.endTime] = function(e) {
-                    this.model.set({ "endTime": this.ui.endTime.val() });
+                    this.model.set({ "endTime": that.getDateFormat(this.ui.endTime.val()) });
                     this.buttonActive({ isButtonActive: true });
                 };
                 events["change " + this.ui.timeZone] = function(e) {
@@ -76,7 +76,7 @@ define(['require',
                         "singleDatePicker": true,
                         "showDropdowns": true,
                         "timePicker": true,
-                        "timePicker24Hour": true,
+                        "timePicker24Hour": Globals.dateTimeFormat.indexOf("hh") > -1 ? false : true,
                         "timePickerSeconds": true,
                         "startDate": new Date(),
                         "autoApply": true,
@@ -99,38 +99,47 @@ define(['require',
                         startDateObj["autoUpdateInput"] = false;
                     } else {
                         startDateObj["autoUpdateInput"] = true;
-                        startDateObj["startDate"] = this.model.get('startTime');
+                        startDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false });
                     }
                     if (_.isEmpty(this.model.get('endTime'))) {
                         endDateObj["autoUpdateInput"] = false;
-                        endDateObj["minDate"] = this.model.get('startTime');
+                        endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false });
                     } else {
                         endDateObj["autoUpdateInput"] = true;
-                        endDateObj["minDate"] = this.model.get('startTime');
-                        endDateObj["startDate"] = this.model.get('endTime');
+                        endDateObj["minDate"] = Utils.formatDate({ date: Date.parse(this.model.get('startTime')), zone: false });
+                        endDateObj["startDate"] = Utils.formatDate({ date: Date.parse(this.model.get('endTime')), zone: false });
                     }
                     if (!_.isEmpty(this.model.get('timeZone'))) {
                         this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true });
                     }
                 } else {
-                    this.model.set('startTime', that.ui.startTime.val());
-                    this.model.set('endTime', that.ui.endTime.val());
+                    this.model.set('startTime', that.getDateFormat(that.ui.startTime.val()));
+                    this.model.set('endTime', that.getDateFormat(that.ui.endTime.val()));
                 }
                 this.ui.startTime.daterangepicker(startDateObj).on('apply.daterangepicker', function(ev, picker) {
                     that.ui.startTime.val(Utils.formatDate({ date: picker.startDate, zone: false }));
                     _.extend(endDateObj, { "minDate": that.ui.startTime.val() })
                     that.endDateInitialize(endDateObj);
-                    that.model.set('startTime', that.ui.startTime.val());
+                    that.model.set('startTime', that.getDateFormat(that.ui.startTime.val()));
                     that.buttonActive({ isButtonActive: true });
                 }).on('cancel.daterangepicker', function(ev, picker) {
                     that.ui.startTime.val('');
                     delete endDateObj.minDate;
                     that.endDateInitialize(endDateObj);
-                    that.model.set('startTime', that.ui.startTime.val());
+                    that.model.set('startTime', that.getDateFormat(that.ui.startTime.val()));
                 });
                 this.endDateInitialize(endDateObj);
                 this.buttonActive({ isButtonActive: true });
             },
+            getDateFormat: function(option) {
+                if (option && option.length) {
+                    if (Globals.dateTimeFormat.indexOf("HH") > -1) {
+                        option = option.slice(0, -3); // remove AM/PM from 24hr format
+                    }
+                    return moment(Date.parse(option)).format('YYYY/MM/DD HH:mm:ss');
+                }
+                return "";
+            },
             buttonActive: function(option) {
                 var that = this;
                 if (option && option.isButtonActive && that.tagModel) {
@@ -154,11 +163,11 @@ define(['require',
                 var that = this;
                 this.ui.endTime.daterangepicker(option).on('apply.daterangepicker', function(ev, picker) {
                     that.ui.endTime.val(Utils.formatDate({ date: picker.startDate, zone: false }));
-                    that.model.set('endTime', that.ui.endTime.val());
+                    that.model.set('endTime', that.getDateFormat(that.ui.endTime.val()));
                     that.buttonActive({ isButtonActive: true });
                 }).on('cancel.daterangepicker', function(ev, picker) {
                     that.ui.endTime.val('');
-                    that.model.set('endTime', that.ui.endTime.val());
+                    that.model.set('endTime', that.getDateFormat(that.ui.endTime.val()));
                 });
             }
         });