1 files changed, 22 insertions, 4 deletions
diff --git a/app/assets/javascripts/access_tokens/components/expires_at_field.vue b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
index d0932ad80e1..1fec186f2fa 100644
--- a/app/assets/javascripts/access_tokens/components/expires_at_field.vue
+++ b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
@@ -1,14 +1,32 @@
 <script>
-import { GlDatepicker } from '@gitlab/ui';
+import { GlDatepicker, GlFormInput } from '@gitlab/ui';
 
 export default {
   name: 'ExpiresAtField',
-  components: { GlDatepicker },
+  components: { GlDatepicker, GlFormInput },
+  props: {
+    inputAttrs: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      minDate: new Date(),
+    };
+  },
 };
 </script>
 
 <template>
-  <gl-datepicker :target="null" :min-date="new Date()">
-    <slot></slot>
+  <gl-datepicker :target="null" :min-date="minDate">
+    <gl-form-input
+      v-bind="inputAttrs"
+      class="datepicker gl-datepicker-input"
+      autocomplete="off"
+      inputmode="none"
+      data-qa-selector="expiry_date_field"
+    />
   </gl-datepicker>
 </template>