gitlab-org--gitlab-foss/app/assets/javascripts/member_expiration_date.js

53 lines
1.5 KiB
JavaScript
Raw Normal View History

2017-01-04 08:16:14 -05:00
/* global Pikaday */
/* global dateFormat */
(() => {
// 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') => {
2016-08-18 20:41:18 -04:00
function toggleClearInput() {
$(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
}
const inputs = $(selector);
2017-01-04 08:16:14 -05:00
inputs.each((i, el) => {
const $input = $(el);
const calendar = new Pikaday({
field: $input.get(0),
2017-01-04 11:53:41 -05:00
theme: 'gitlab-theme',
2017-02-14 16:45:36 -05:00
format: 'yyyy-mm-dd',
2017-01-04 08:16:14 -05:00
minDate: new Date(),
2017-01-06 09:43:21 -05:00
onSelect(dateText) {
2017-01-04 08:16:14 -05:00
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
$input.trigger('change');
2017-01-06 09:43:21 -05:00
toggleClearInput.call($input);
2017-01-04 08:16:14 -05:00
},
});
2017-02-14 16:45:36 -05:00
calendar.setDate(new Date($input.val()));
2017-01-04 08:16:14 -05:00
$input.data('pikaday', calendar);
2016-08-18 20:41:18 -04:00
});
inputs.next('.js-clear-input').on('click', function clicked(event) {
2016-08-18 20:41:18 -04:00
event.preventDefault();
const input = $(this).closest('.clearable-input').find(selector);
2017-01-04 08:16:14 -05:00
const calendar = input.data('pikaday');
calendar.setDate(null);
input.trigger('change');
2016-08-18 20:41:18 -04:00
toggleClearInput.call(input);
});
2016-08-18 20:41:18 -04:00
inputs.on('blur', toggleClearInput);
2016-08-18 20:41:18 -04:00
inputs.each(toggleClearInput);
};
}).call(window);