member_expiration_date.js.es6 1.55 KB
Newer Older
1 2
/* global Pikaday */
/* global dateFormat */
3
(() => {
4 5 6 7 8
  // 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.
  //
9
  window.gl = window.gl || {};
10
  gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
Douwe Maan's avatar
Douwe Maan committed
11 12 13
    function toggleClearInput() {
      $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
    }
14
    const inputs = $(selector);
15

16 17 18 19 20
    inputs.each((i, el) => {
      const $input = $(el);

      const calendar = new Pikaday({
        field: $input.get(0),
Phil Hughes's avatar
Phil Hughes committed
21
        theme: 'gitlab-theme',
Phil Hughes's avatar
Phil Hughes committed
22
        format: 'yyyy-mm-dd',
23
        minDate: new Date(),
Phil Hughes's avatar
Phil Hughes committed
24
        onSelect(dateText) {
25 26 27 28
          $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));

          $input.trigger('change');

Phil Hughes's avatar
Phil Hughes committed
29
          toggleClearInput.call($input);
30 31 32
        },
      });

Phil Hughes's avatar
Phil Hughes committed
33
      calendar.setDate(new Date($input.val()));
34
      $input.data('pikaday', calendar);
Douwe Maan's avatar
Douwe Maan committed
35
    });
36

37
    inputs.next('.js-clear-input').on('click', function clicked(event) {
Douwe Maan's avatar
Douwe Maan committed
38
      event.preventDefault();
39

40
      const input = $(this).closest('.clearable-input').find(selector);
41 42 43 44
      const calendar = input.data('pikaday');

      calendar.setDate(null);
      input.trigger('change');
Douwe Maan's avatar
Douwe Maan committed
45 46
      toggleClearInput.call(input);
    });
47

Douwe Maan's avatar
Douwe Maan committed
48
    inputs.on('blur', toggleClearInput);
49

Douwe Maan's avatar
Douwe Maan committed
50
    inputs.each(toggleClearInput);
51 52
  };
}).call(this);