Merge pull request #2533 from jlmitch5/schDatePicker

use bootstrap date picker and fix for locales

awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js

@@ -96,6 +96,11 @@ angular.module('AngularScheduler', ['underscore'])
                 }
             };
 
+            // change the utc time with the new start date
+            scope.$watch('schedulerStartDt', function() {
+                scope.scheduleTimeChange(scope.processSchedulerEndDt);
+            });
+
             scope.resetError = function(variable) {
                 scope[variable] = false;
             };

awx/ui/client/src/management-jobs/scheduler/schedulerForm.partial.html

@@ -42,26 +42,9 @@
                         (mm/dd/yyyy)
                     </span>
                 </label>
-                <div class="input-group Form-inputGroup">
+                <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
-                    <input type="text"
+                    <scheduler-date-picker date="schedulerStartDt">
-                        class="form-control input-sm
+                    </scheduler-date-picker>
-                            Form-textInput"
-                        name="schedulerStartDt"
-                        id="schedulerStartDt"
-                        ng-model="schedulerStartDt"
-                        sch-date-picker
-                        placeholder="mm/dd/yyyy"
-                        required
-                        ng-change="scheduleTimeChange()" >
-                        <span class="input-group-btn">
-                            <button
-                                class="btn btn-default btn-sm
-                                    Form-inputButton Form-lookupButton"
-                                type="button"
-                                ng-click="showCalendar('schedulerStartDt')">
-                                <i class="fa fa-calendar"></i>
-                            </button>
-                        </span>
                 </div>
                 <div class="error"
                     ng-show="scheduler_form_schedulerStartDt_error"
@@ -508,26 +491,9 @@
                             (mm/dd/yyyy)
                         </span>
                     </label>
-                    <div class="input-group Form-inputGroup">
+                    <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
-                        <input type="text"
+                        <scheduler-date-picker date="$parent.schedulerEndDt">
-                            name="schedulerEndDt"
+                        </scheduler-date-picker>
-                            id="schedulerEndDt"
-                            class="form-control input-sm
-                                Form-textInput"
-                            ng-model="$parent.schedulerEndDt"
-                            sch-date-picker
-                            data-min-today="true"
-                            placeholder="mm/dd/yyyy"
-                            ng-change="$parent.resetError('scheduler_endDt_error')">
-                        <span class="input-group-btn">
-                            <button class="btn btn-default btn-sm
-                                Form-inputButton Form-lookupButton"
-                                type="button"
-                                ng-click="showCalendar('schedulerEndDt')"
-                            >
-                                <i class="fa fa-calendar"></i>
-                            </button>
-                        </span>
                     </div>
                     <div class="error"
                         ng-show="$parent.scheduler_endDt_error">

awx/ui/client/src/scheduler/main.js

@@ -8,12 +8,14 @@ import controller from './scheduler.controller';
 import addController from './schedulerAdd.controller';
 import editController from './schedulerEdit.controller';
 import {templateUrl} from '../shared/template-url/template-url.factory';
+import schedulerDatePicker from './schedulerDatePicker.directive';
 
 export default
     angular.module('scheduler', [])
         .controller('schedulerController', controller)
         .controller('schedulerAddController', addController)
         .controller('schedulerEditController', editController)
+        .directive('schedulerDatePicker', schedulerDatePicker)
         .run(['$stateExtender', function($stateExtender) {
             $stateExtender.addState({
                 name: 'jobTemplateSchedules',

awx/ui/client/src/scheduler/scheduler.controller.js

@@ -23,11 +23,7 @@ export default [
 
         ClearScope();
 
-        $scope.schedulerStartDT = 'test';
-
         var base, id, url,parentObject, title;
-        $scope.schedulerStartDT = 'test';
-
 
         base = $location.path().replace(/^\//, '').split('/')[0];
         if (base === 'management_jobs') {

awx/ui/client/src/scheduler/schedulerDatePicker.directive.js

@@ -0,0 +1,92 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+
+export default
+    [   'moment',
+        'templateUrl',
+        function(moment, templateUrl) {
+            return {
+                restrict: 'E',
+                scope: {
+                    date: '=',
+                    minDate: '=',
+                    autoUpdate: '=?',
+                    inputClass: '&'
+                },
+                templateUrl: templateUrl('system-tracking/date-picker/date-picker'),
+                link: function(scope, element, attrs) {
+                    // We need to make sure this _never_ recurses, which sometimes happens
+                    // with two-way binding.
+                    var mustUpdateValue = true;
+                    scope.autoUpdate = scope.autoUpdate === false ? false : true;
+
+                    // convert the passed current date into the correct moment locale
+                    scope.$watch('date', function(newValue) {
+                        if (newValue) {
+                            mustUpdateValue = false;
+                            scope.dateValueMoment = moment(newValue, ['MM/DD/YYYY'], moment.locale());
+                            scope.dateValue = scope.dateValueMoment.format('L');
+                        }
+                    }, true);
+
+                    // as the date picker value changes, convert back to
+                    // the english date to pass back into the scheduler lib
+                    scope.$watch('dateValue', function(newValue) {
+                        scope.dateValueMoment = moment(newValue, ['L'], moment.locale());
+                        scope.date = scope.dateValueMoment.locale('en').format('L');
+                        mustUpdateValue = true;
+                    });
+
+                    var localeData =
+                        moment.localeData();
+                    var dateFormat = momentFormatToDPFormat(localeData._longDateFormat.L);
+                    var localeKey = momentLocaleToDPLocale(moment.locale());
+
+                    element.find(".DatePicker").addClass("input-prepend date");
+                    element.find(".DatePicker").find(".DatePicker-icon").addClass("add-on");
+                    $(".date").systemTrackingDP({
+                        autoclose: true,
+                        language: localeKey,
+                        format: dateFormat
+                    });
+
+                    function momentLocaleToDPLocale(localeKey) {
+                        var parts = localeKey.split('-');
+
+                        if (parts.length === 2) {
+                            var lastPart = parts[1].toUpperCase();
+                            return [parts[0], lastPart].join('-');
+                        } else {
+                            return localeKey;
+                        }
+
+                    }
+
+                    function momentFormatToDPFormat(momentFormat) {
+                        var resultFormat = momentFormat;
+
+                        function lowerCase(str) {
+                            return str.toLowerCase();
+                        }
+
+                        resultFormat = resultFormat.replace(/D{1,2}/, lowerCase);
+
+                        if (/MMM/.test(resultFormat)) {
+                            resultFormat = resultFormat.replace('MMM', 'M');
+                        } else {
+                            resultFormat = resultFormat.replace(/M{1,2}/, 'm');
+                        }
+
+                        resultFormat = resultFormat.replace(/Y{2,4}/, lowerCase);
+
+                        return resultFormat;
+                    }
+                }
+            };
+        }
+    ];

awx/ui/client/src/scheduler/schedulerDatePicker.partial.html

@@ -0,0 +1,9 @@
+<div class="DatePicker">
+    <button class="DatePicker-icon"><i class="fa fa-calendar"></i></button>
+    <input
+        class="DatePicker-input"
+        type="text"
+        readonly
+        ng-model="dateValue"
+        ng-class="inputClass()">
+</div>

awx/ui/client/src/scheduler/schedulerForm.block.less

@@ -6,6 +6,18 @@
     padding-right: 0px;
 }
 
+.SchedulerForm-inputGroup--date {
+    width: 100%;
+}
+
+#SchedulerFormTarget .DatePicker {
+    max-height: 31px;
+}
+
+#SchedulerFormTarget .DatePicker-icon {
+    padding-top: 4px;
+}
+
 @media (min-width: 901px) {
     .SchedulerForm-formGroup {
         flex: 0 0 auto;

awx/ui/client/src/scheduler/schedulerForm.partial.html

@@ -42,26 +42,9 @@
                         (mm/dd/yyyy)
                     </span>
                 </label>
-                <div class="input-group Form-inputGroup">
+                <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
-                    <input type="text"
+                    <scheduler-date-picker date="schedulerStartDt">
-                        class="form-control input-sm
+                    </scheduler-date-picker>
-                            Form-textInput"
-                        name="schedulerStartDt"
-                        id="schedulerStartDt"
-                        ng-model="schedulerStartDt"
-                        sch-date-picker
-                        placeholder="mm/dd/yyyy"
-                        required
-                        ng-change="scheduleTimeChange(processSchedulerEndDt)" >
-                        <span class="input-group-btn">
-                            <button
-                                class="btn btn-default btn-sm
-                                    Form-inputButton Form-lookupButton"
-                                type="button"
-                                ng-click="showCalendar('schedulerStartDt')">
-                                <i class="fa fa-calendar"></i>
-                            </button>
-                        </span>
                 </div>
                 <div class="error"
                     ng-show="scheduler_form_schedulerStartDt_error"
@@ -490,26 +473,9 @@
                             (mm/dd/yyyy)
                         </span>
                     </label>
-                    <div class="input-group Form-inputGroup">
+                    <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
-                        <input type="text"
+                        <scheduler-date-picker date="$parent.schedulerEndDt">
-                            name="schedulerEndDt"
+                        </scheduler-date-picker>
-                            id="schedulerEndDt"
-                            class="form-control input-sm
-                                Form-textInput"
-                            ng-model="$parent.schedulerEndDt"
-                            sch-date-picker
-                            data-min-today="true"
-                            placeholder="mm/dd/yyyy"
-                            ng-change="$parent.resetError('scheduler_endDt_error')">
-                        <span class="input-group-btn">
-                            <button class="btn btn-default btn-sm
-                                Form-inputButton Form-lookupButton"
-                                type="button"
-                                ng-click="showCalendar('schedulerEndDt')"
-                            >
-                                <i class="fa fa-calendar"></i>
-                            </button>
-                        </span>
                     </div>
                     <div class="error"
                         ng-show="$parent.scheduler_endDt_error">