2 files changed, 49 insertions, 8 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>
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index 9bdb2940956..319144193f1 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -1,11 +1,34 @@
 import Vue from 'vue';
 import ExpiresAtField from './components/expires_at_field.vue';
 
+const getInputAttrs = el => {
+  const input = el.querySelector('input');
+
+  return {
+    id: input.id,
+    name: input.name,
+    placeholder: input.placeholder,
+  };
+};
+
 const initExpiresAtField = () => {
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: document.querySelector('.js-access-tokens-expires-at'),
-    components: { ExpiresAtField },
+  const el = document.querySelector('.js-access-tokens-expires-at');
+
+  if (!el) {
+    return null;
+  }
+
+  const inputAttrs = getInputAttrs(el);
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(ExpiresAtField, {
+        props: {
+          inputAttrs,
+        },
+      });
+    },
   });
 };