@skhemata/skhemata-form/dist/src/SkhemataFormDatePicker.js

Skhemata Form Web Component. This web component can be used as base web component when working with forms and inputs.

import { __decorate } from "tslib";
import { html, property } from '@skhemata/skhemata-base';
import { SkhemataFormInput } from './SkhemataFormInput';
export class SkhemataFormDatePicker extends SkhemataFormInput {
    min = '';
    max = '';
    submitOnEnter = false;
    type = 'text';
    constructor() {
        super();
        this.value = '';
    }
    handleInput(event) {
        this.clearError();
        this.setAttribute('value', event.target.value);
    }
    handleKeydown(event) {
        this.clearError();
        if (event.keyCode === '13' && this.submitOnEnter) {
            this.validate();
            if (!this.valid) {
                return;
            }
            this.dispatchEvent(new CustomEvent('submit'));
            event.preventDefault();
        }
    }
    render() {
        const field = html `
      <div class="field">
        ${this.label && !this.horizontal
            ? html `<label class="label">${this.label} ${this.required ? html `<span style="color: red">*</span>` : null}</label>`
            : null}
        <div
          class="control"
        >
          ${this.description && !this.horizontal
            ? html `<p>${this.description}</p>`
            : null}
            <input class="input" type="date" min=${this.min} max=${this.max} value=${this.value} @input=${this.handleInput}/>
        </div>
        ${!this.valid
            ? html `<p class="help ${this.helpClass}">${this.errorMessage}</p>`
            : ``}
      </div>
    `;
        const horizontalFieldLabel = html `
      <div class="field-label column is-one-quarter" style="text-align: left">
        ${this.label ? html `<label class="label">${this.label} ${this.required ? html `<span style="color: red">*</span>` : null}</label>` : null}
        ${this.description ? html `<p>${this.description}</p>` : null}
      </div>
    `;
        const horizontalField = html `
      <div class="field is-horizontal">
        ${this.label || this.description ? horizontalFieldLabel : null}
        <div class="field-body column">${field}</div>
      </div>
    `;
        return this.horizontal ? horizontalField : field;
    }
}
__decorate([
    property({ type: String })
], SkhemataFormDatePicker.prototype, "min", void 0);
__decorate([
    property({ type: String })
], SkhemataFormDatePicker.prototype, "max", void 0);
__decorate([
    property({ type: Boolean })
], SkhemataFormDatePicker.prototype, "submitOnEnter", void 0);
__decorate([
    property({ type: String })
], SkhemataFormDatePicker.prototype, "type", void 0);
//# sourceMappingURL=SkhemataFormDatePicker.js.map