feat(datepicker): add slot for custom input

First contribution to GitLab UI so let me know if I missed anyting 🙂

Integration branch - gitlab!30523 (closed)

Adds a slot to pass the input that is bound to Pikaday. If the slot is not used it defaults to the existing input provided in this component. This will allow users to add HTML attributes such as name, id, aria-label, placeholder etc to the input.

This will also allow us to easily use the component in .haml files and take advantage of the form helpers such as f.text_field which pre-populate name and id attributes. For example with this change we could easily use this component to replace one field in a haml form.

= form_for token, as: :project_access_token, url: path, method: :post, html: { class: 'js-requires-input' } do |f|

  = form_errors(token)

  .row
    .form-group.col-md-6
      = f.label :name, _('Name'), class: 'label-bold'
      = f.text_field :name, class: "form-control", required: true
  .row
    .form-group.col-md-6
      = f.label :expires_at, _('Expires at'), class: 'label-bold'
      .input-icon-wrapper
        .js-project-access-tokens-expires-at
          %gl-datepicker
            = f.text_field :expires_at, class: "form-control", placeholder: 'YYYY-MM-DD', autocomplete: 'off', data: { qa_selector: 'expiry_date_field' }

import Vue from 'vue';
import { GlDatepicker } from '@gitlab/ui';

document.addEventListener(
  'DOMContentLoaded',
  () =>
    new Vue({
      el: document.querySelector('.js-project-access-tokens-expires-at'),
      components: { GlDatepicker },
    }),
);

Other changes

• Fixes #681 (closed) which is caused by https://github.com/Pikaday/Pikaday/issues/840. I have opened up a PR on the Pikaday repo to fix this: https://github.com/Pikaday/Pikaday/pull/883 Note: this could be considered a breaking change. Thoughts on this change?
• Pass null as target prop to open on focus
• Pass null as container prop to prevent passing container option to Pikaday. Results in the datepicker being bound to the body.