diff options
Diffstat (limited to 'app/assets/javascripts/member_expiration_date.js.es6')
-rw-r--r-- | app/assets/javascripts/member_expiration_date.js.es6 | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/app/assets/javascripts/member_expiration_date.js.es6 b/app/assets/javascripts/member_expiration_date.js.es6 new file mode 100644 index 00000000000..bf6c0ec2798 --- /dev/null +++ b/app/assets/javascripts/member_expiration_date.js.es6 @@ -0,0 +1,36 @@ +(() => { + // 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. + // + window.gl = window.gl || {}; + gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => { + function toggleClearInput() { + $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== ''); + } + const inputs = $(selector); + + inputs.datepicker({ + dateFormat: 'yy-mm-dd', + minDate: 1, + onSelect: function onSelect() { + $(this).trigger('change'); + toggleClearInput.call(this); + }, + }); + + inputs.next('.js-clear-input').on('click', function clicked(event) { + event.preventDefault(); + + const input = $(this).closest('.clearable-input').find(selector); + input.datepicker('setDate', null) + .trigger('change'); + toggleClearInput.call(input); + }); + + inputs.on('blur', toggleClearInput); + + inputs.each(toggleClearInput); + }; +}).call(this); |