BigW Consortium Gitlab

member_expiration_date.js 1.64 KB
Newer Older
1
import Pikaday from 'pikaday';
Filipa Lacerda committed
2
import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
3

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
// Add datepickers to all `js-access-expiration-date` elements. If those elements are
// children of an element with the `clearable-input` class, and have a sibling
// `js-clear-input` element, then show that element when there is a value in the
// datepicker, and make clicking on that element clear the field.
//
export default function memberExpirationDate(selector = '.js-access-expiration-date') {
  function toggleClearInput() {
    $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
  }
  const inputs = $(selector);

  inputs.each((i, el) => {
    const $input = $(el);

    const calendar = new Pikaday({
      field: $input.get(0),
      theme: 'gitlab-theme animate-picker',
      format: 'yyyy-mm-dd',
      minDate: new Date(),
      container: $input.parent().get(0),
Filipa Lacerda committed
24 25
      parse: dateString => parsePikadayDate(dateString),
      toString: date => pikadayToString(date),
26
      onSelect(dateText) {
Filipa Lacerda committed
27
        $input.val(calendar.toString(dateText));
28 29 30 31 32

        $input.trigger('change');

        toggleClearInput.call($input);
      },
33
    });
34

Filipa Lacerda committed
35
    calendar.setDate(parsePikadayDate($input.val()));
36 37
    $input.data('pikaday', calendar);
  });
38

39 40
  inputs.next('.js-clear-input').on('click', function clicked(event) {
    event.preventDefault();
41

42 43 44 45 46 47 48
    const input = $(this).closest('.clearable-input').find(selector);
    const calendar = input.data('pikaday');

    calendar.setDate(null);
    input.trigger('change');
    toggleClearInput.call(input);
  });
49

50
  inputs.on('blur', toggleClearInput);
51

52 53
  inputs.each(toggleClearInput);
}