Use op-single-date-picker for backlogs, fix value from dataset loading for op-single-date-picker

app/helpers/application_helper.rb

@@ -385,7 +385,7 @@ module ApplicationHelper
   end
 
   def calendar_for(*_args)
-    ActiveSupport::Deprecation.warn "calendar_for has been removed. Please add the class '-augmented-datepicker' instead.", caller
+    ActiveSupport::Deprecation.warn "calendar_for has been removed. Please use the op-single-date-picker angular component instead", caller
   end
 
   def locale_first_day_of_week

app/helpers/custom_fields_helper.rb

@@ -78,8 +78,13 @@ module CustomFieldsHelper
 
     tag = case field_format.try(:edit_as)
           when 'date'
-            styled_text_field_tag(field_name, custom_value.value, id: field_id, class: '-augmented-datepicker', size: 10,
-                                                                  container_class: '-slim', required: custom_field.is_required)
+            angular_component_tag 'op-single-date-picker',
+                                  inputs: {
+                                    required: custom_field.is_required,
+                                    value: custom_value.value,
+                                    id: field_id,
+                                    name: field_name
+                                  }
           when 'text'
             styled_text_area_tag(field_name, custom_value.value, id: field_id, rows: 3, container_class: '-middle',
                                                                  required: custom_field.is_required)

frontend/src/app/features/backlogs/backlogs-page/styles/master_backlog.sass

@@ -283,6 +283,11 @@
       .velocity, .add_new_story
         display: none
   .backlog .sprint.editing
+    .editors
+      display: flex
+      align-items: center
+      flex-direction: row-reverse
+
     .editor
       font-size: 0.9rem
       line-height: 1.5rem
@@ -291,10 +296,11 @@
       padding: 0
 
       &.name
-        min-width: 15em
-        width: calc(100% - 2 * 85px - 10px)
-      &.start_date, &.effective_date
-        width: 85px
+        flex-basis: 15em
+      &.start_date,
+      &.effective_date
+        margin-left: 0.5em
+        flex-basis: 12.5em
 
   .stories .story.editing
     >

frontend/src/app/shared/components/datepicker/single-date-picker/single-date-picker.component.ts

@@ -71,7 +71,16 @@ export const opSingleDatePickerSelector = 'op-single-date-picker';
 export class OpSingleDatePickerComponent implements ControlValueAccessor {
   @Output('valueChange') valueChange = new EventEmitter();
 
-  @Input() value = '';
+  private _value = '';
+
+  @Input() set value(newValue:string) {
+    this._value = newValue;
+    this.writeWorkingValue(newValue);
+  }
+
+  get value() {
+    return this._value;
+  }
 
   @Input() id = `flatpickr-input-${+(new Date())}`;
 

lib/custom_field_form_builder.rb

@@ -68,8 +68,14 @@ class CustomFieldFormBuilder < TabularFormBuilder
 
     case field_format.try(:edit_as)
     when 'date'
-      input_options[:class] = (input_options[:class] || '') << ' -augmented-datepicker'
-      text_field(field, input_options)
+      angular_component_tag 'op-single-date-picker',
+                            class: input_options.class,
+                            inputs: {
+                              required: field.is_required,
+                              value: input_options.value,
+                              id: input_options.id,
+                              name: input_options.name
+                            }
     when 'text'
       text_area(field, input_options.merge(with_text_formatting: true, macros: false, editor_type: 'constrained'))
     when 'bool'

modules/backlogs/app/views/rb_sprints/_sprint.html.erb

@@ -47,14 +47,22 @@ See COPYRIGHT and LICENSE files for more details.
 
   <% if User.current.allowed_to?(:update_sprints, @project) %>
     <div class="editors permanent">
-      <%= text_field_tag :effective_date,
-                         sprint.effective_date,
-                         id: "effective_date_#{sprint.id}",
-                         class: '-augmented-datepicker effective_date editor' %>
-      <%= text_field_tag :start_date,
-                         sprint.start_date,
-                         id: "start_date_#{sprint.id}",
-                         class: '-augmented-datepicker start_date editor' %>
+      <%= angular_component_tag "op-single-date-picker",
+                            class: "effective_date editor",
+                            inputs: {
+                              value: sprint.effective_date,
+                              id: "effective_date_#{sprint.id}",
+                              name: :effective_date
+                            }
+      %>
+      <%= angular_component_tag "op-single-date-picker",
+                            class: "start_date editor",
+                            inputs: {
+                              value: sprint.start_date,
+                              id: "start_date_#{sprint.id}",
+                              name: :start_date
+                            }
+      %>
       <%= text_field_tag :name,
                          sprint.name,
                          class: 'name editor' %>