<label class="m-form-date" for="frm-pc-form-date">
	<span class="w-100">
		<input type="text" name="date" id="frm-pc-form-date" class="m-form-date__input a-form-input jq_datepicker">
	</span>
	<i class="m-form-date__icon icon-calendar" aria-hidden="true"></i>
</label>

@import "atoms/form-input/index";

@import "pickmeup/andy-theme";

.m-form-date {

    @extend .a-form-input;
    align-items: center;
    cursor: text;
    display: flex;
    padding: 0;

    #{&} &__input {

        border: 0;
        margin: 0;

    }

    &__icon {

        padding: em(10px);
        text-align: right;

    }

}

import $ from 'jquery';

import pickmeup from 'pickmeup/dist/pickmeup.min';

export default class DatePicker {
	constructor() {
		if (this.test()) {
			if (typeof pickMeUp_i18n !== 'undefined') pickmeup.defaults.locales['i18n'] = pickMeUp_i18n; // eslint-disable-line

			$('.jq_datepicker').each((i, el) => {
				$(el).attr('readonly', 'true');

				pickmeup(el, this.options($(el)));

				el.addEventListener('pickmeup-change', function(e) {
					$(this).trigger('change');

					if (typeof $(this).attr('data-alt') != 'undefined') {
						var selectedDate = e.detail.date;

						$('[name="' + $(this).attr('data-alt') + '"]')
							.val(selectedDate.getFullYear() +
								'-' + (selectedDate.getMonth() + 1) +
								'-' + selectedDate.getDate());
					}
				});
			});
		}
	}

	test() {
		return $('.jq_datepicker').length && typeof pickmeup == 'function' ? true : false;
	}

	options($el) {
		return {
			position: 'bottom',
			hide_on_select: true,
			format: 'd/m/Y',
			min: $el.attr('data-set-min') ? new Date() : false,
			max: $el.attr('data-set-max') ? new Date(2026, 11, 31, 0, 0, 0, 0) : false,
			default_date: false,
			locale: typeof pickMeUp_i18n !== 'undefined' ? 'i18n' : 'en', // eslint-disable-line camelcase
			view: $el.attr('data-view') ? $el.attr('data-view') : 'days',
			class_name: 'pmu',
			prev: '<i class="pmu-button-arrow a-icon-angle-left"></i>',
			next: '<i class="pmu-button-arrow a-icon-angle-right"></i>'
		};
	}
}

$(() => new DatePicker);