import {css, CSSResult, html, TemplateResult, unsafeCSS} from 'lit'; import i18next from 'i18next'; import {customElement} from 'lit/decorators.js'; import GmfTimeInput from 'gmf/time-input/time-input'; /** * Gives you a datepicker (simple or range) based on OGC time. * Based on GmfTimeInput. * Example: * */ @customElement('gmf-datepicker') export default class GmfDatepicker extends GmfTimeInput { static styles: CSSResult[] = [ css` input[type='date'] { font-size: 80%; } `, ]; /** * Lit rendering. * @returns the html template for datepicker(s). */ render(): TemplateResult { if (!this.timeProp) { return html``; } const startText = this.isTimeRange() ? 'From:' : 'Date:'; const i18nextOptions = {nsSeparator: '#'}; const datepickerStart = html` ${i18next.t(startText, i18nextOptions)} `; let datepickerEnd = null; if (this.isTimeRange()) { datepickerEnd = html` ${i18next.t('To:', i18nextOptions)} `; } return html`
${datepickerStart} ${datepickerEnd ? html`${datepickerEnd}` : html``}
`; } /** * On range mode, calculate the min date value with the second date-picker's value. * @returns The min selectable date. * @private */ private getDateMin(): string { if (!this.isTimeRange()) { return this.timeProp.minValue; } const start: HTMLInputElement = this.shadowRoot.querySelector('.datepicker-start'); return start ? start.value : this.timeProp.minValue; } /** * On range mode, calculate the max date value with the second date-picker's value. * @returns The max selectable date. * @private */ private getDateMax(): string { if (!this.isTimeRange()) { return this.timeProp.maxValue; } const end: HTMLInputElement = this.shadowRoot.querySelector('.datepicker-end'); return end ? end.value : this.timeProp.maxValue; } }