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

Douwe Maan's avatar
Douwe Maan committed
14 15 16
    inputs.datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: 1,
17
      onSelect: function onSelect() {
18 19
        $(this).trigger('change');
        toggleClearInput.call(this);
20
      },
Douwe Maan's avatar
Douwe Maan committed
21
    });
22

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

26
      const input = $(this).closest('.clearable-input').find(selector);
27 28
      input.datepicker('setDate', null)
        .trigger('change');
Douwe Maan's avatar
Douwe Maan committed
29 30
      toggleClearInput.call(input);
    });
31

Douwe Maan's avatar
Douwe Maan committed
32
    inputs.on('blur', toggleClearInput);
33

Douwe Maan's avatar
Douwe Maan committed
34
    inputs.each(toggleClearInput);
35 36
  };
}).call(this);