Remove datepicker on mobile and use native date fields instead

app/components/work_packages/date_picker/date_form_component.rb

@@ -80,7 +80,7 @@ def text_field_options(name:, label:)
           show_clear_button: !disabled?(name) && !duration_field?(name),
           classes: "op-datepicker-modal--date-field #{'op-datepicker-modal--date-field_current' if @focused_field == name}",
           validation_message: validation_message(name),
-          type: duration_field?(name) ? :number : :text
+          type: field_type(name)
         )
 
         if duration_field?(name)
@@ -177,6 +177,12 @@ def field_value(name)
         end
       end
 
+      def field_type(name)
+        return :number if duration_field?(name)
+
+        helpers.browser.device.mobile? ? :date : :text
+      end
+
       def validation_message(name)
         # it's ok to take the first error only, that's how primer_view_component does it anyway.
         message = @work_package.errors.messages_for(name).first

app/components/work_packages/date_picker/dialog_content_component.sass

@@ -22,8 +22,10 @@ $body-height: 460px
 
 @media screen and (max-width: $breakpoint-sm)
   .wp-datepicker-dialog
-    &--UnderlineNav
+    &--UnderlineNav,
+    &--date-picker-instance
       display: none !important
+
     &--body
       padding-top: var(--stack-padding-normal)
       min-height: unset

app/components/work_packages/date_picker/form_component.html.erb

@@ -97,7 +97,7 @@
           )
         end
 
-        body.with_row("aria-hidden": true) do
+        body.with_row("aria-hidden": true, classes: "wp-datepicker-dialog--date-picker-instance") do
           helpers.angular_component_tag "opce-wp-date-picker-instance",
                                         inputs: {
                                           start_date: work_package.start_date,