diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 4d15da32ff8c..335fa47c2e44 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -50,6 +50,7 @@
//= require bootstrap-select
//= require bootstrap-hover-dropdown
//= require bootstrap-switch
+//= require bootstrap-touchspin
//= require angular-bootstrap-switch
//= require angular-ui-codemirror
//= require patternfly-bootstrap-treeview
diff --git a/app/assets/javascripts/components/datetime-delay-picker.js b/app/assets/javascripts/components/datetime-delay-picker.js
new file mode 100644
index 000000000000..8c4de1ea929b
--- /dev/null
+++ b/app/assets/javascripts/components/datetime-delay-picker.js
@@ -0,0 +1,59 @@
+ManageIQ.angular.app.component('datetimeDelayPicker', {
+ bindings: {
+ model: '=',
+ start_date: '<',
+ },
+
+ controllerAs: 'vm',
+
+ controller: ['$scope', '$element', function($scope, $element) {
+ $scope.__ = __;
+
+ this.months = 0;
+ this.weeks = 0;
+ this.days = 0;
+ this.hours = 0;
+
+ this.setRetirementDate = function() {
+ this.model = moment(this.start_date)
+ .add(this.months, 'month')
+ .add(this.weeks, 'week')
+ .add(this.days, 'day')
+ .add(this.hours, 'hour')
+ .toDate();
+ };
+
+ this.$onInit = function() {
+ if (! this.start_date) {
+ this.start_date = new Date();
+ }
+ };
+
+ this.$postLink = function() {
+ var commonAttrs = {min: 0, verticalbuttons: true, buttondown_class: "btn btn-link", buttonup_class: "btn btn-link"};
+ var attrs = {months: __('Months'), weeks: __('Weeks'), days: __('Days'), hours: __('Hours')}
+
+ for (var key in attrs) {
+ $element.find('input[name=' + key + ']').TouchSpin(Object.assign({}, commonAttrs, {'prefix': attrs[key]}));
+ }
+ };
+ }],
+
+ template: [
+ '
',
+ ].join('\n'),
+});
diff --git a/app/views/shared/views/_retire.html.haml b/app/views/shared/views/_retire.html.haml
index 4028f9b5fa01..a30e758d3c4b 100644
--- a/app/views/shared/views/_retire.html.haml
+++ b/app/views/shared/views/_retire.html.haml
@@ -10,15 +10,29 @@
= _('Set/Remove Retirement Date')
%tbody
.form-group
+ %label.col-md-2.control-label
+ = _('Enter Retirement Date as')
+ .col-md-4{"ng-init" => "formMode = 'date'"}
+ = select_tag("formMode",
+ options_for_select(_("Specific Date and Time") => 'date', _("Time Delay from Now") => 'delay'),
+ "ng-model" => "formMode",
+ "pf-select" => true)
+ .form-group{"ng-if" => "formMode == 'date'"}
%label.col-md-2.control-label
= _('Retirement Date and Time')
.col-md-4#retirement_date_div
- .form-group
- = datetimepicker_input_tag('retirement_date', nil,
- 'id' => 'retirement_date',
- 'class' => 'form-control',
- 'ng-model' => 'vm.retirementInfo.retirementDate',
- 'start-date' => 'vm.datepickerStartDate')
+ = datetimepicker_input_tag('retirement_date_datepicker', nil,
+ 'class' => 'form-control',
+ 'ng-model' => 'vm.retirementInfo.retirementDate',
+ 'start-date' => 'vm.datepickerStartDate')
+ %datetime-delay-picker{'ng-if' => "formMode == 'delay'",
+ 'model' => 'vm.retirementInfo.retirementDate',
+ 'start-date' => 'vm.datepickerStartDate'}
+ .form-group{"ng-if" => "formMode == 'delay'"}
+ %label.col-md-2.control-label
+ = _('Retirement Date and Time')
+ .col-md-4#retirement_date_result_div
+ %input.form-control#retirement_date{'readonly' => true, 'ng-model' => 'vm.retirementInfo.retirementDate'}
.form-group
%label.col-md-2.control-label
= _('Retirement Warning')
@@ -35,7 +49,8 @@
"pf-select" => true)
:javascript
miqInitSelectPicker();
- = _('* Saving a blank date will remove all retirement dates')
+ %div{"ng-if" => "formMode == 'date'"}
+ = _('* Saving a blank date will remove all retirement dates')
%hr
%h3