web-ui-pack/controls/date.d.ts

Web package with UI elements

import { AttributeMap } from "../baseElement";
import WUPPopupElement from "../popup/popupElement";
import WUPBaseComboControl from "./baseCombo";
import { SetValueReasons } from "./baseControl";
import WUPTimeControl from "./time";
declare const tagName = "wup-date";
declare global {
    namespace WUP.Date {
        interface EventMap extends WUP.BaseCombo.EventMap {
        }
        interface ValidityMap extends WUP.BaseCombo.ValidityMap {
            /** Enabled if option [min] is pointed; If $value < pointed shows message 'Min date is {x}` */
            min: Date;
            /** Enabled if option [min] is pointed; if $value > pointed shows message 'Max date is {x}` */
            max: Date;
            /** Enabled if option [exclude] is pointed; If invalid shows "This date is disabled" */
            exclude: Date[];
        }
        interface NewOptions {
            /** String representation of displayed date (enables mask, - to disable mask set $options.mask="");
             * @defaultValue localeInfo.date
             * @example `yyyy-mm-dd` or `dd/mm/yyyy`
             * @tutorial Troubleshooting
             * * with changing $options.format need to change/reset mask/maskholder also */
            format: string;
            /** Anchor to TimeControl to sync with date
             * @tutorial dateControl is master and it means
             * * DateControl value merged with TimeControl value (don't need to look for timeControl value at all)
             * * DateControl options/validations `min`, `max` & `required` are applied to TimeControl according to selected data
             * * Option `exclude` are not sync between control for performance purpose (check demo code to implement custom `exclude` for TimControl)
             * * Option `
             * @example
             * ```html
             * <wup-date w-sync="next" w-min="2016-01-02 12:40"></wup-date>
             * <wup-time></wup-time>
             * ``` */
            sync: WUPTimeControl | null;
        }
        interface Options<T = Date, VM = ValidityMap> extends WUP.Calendar.Options<T, VM>, WUP.BaseCombo.Options<T, VM>, NewOptions {
        }
        interface JSXProps<C = WUPDateControl> extends WUP.BaseCombo.JSXProps<C>, WUP.Calendar.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
            "w-initValue"?: string;
            "w-format"?: string;
            /** Anchor to TimeControl to sync with date
             *  * Point querySelector (id, `next` or`false`) to related element
             * @example
             * ```html
             * <wup-date w-sync="next" w-min="2016-01-02 12:40"></wup-date>
             * <wup-time></wup-time>
             * ``` */
            "w-sync"?: string;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPDateControl;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Form-control with datepicker
             *  @see {@link WUPDateControl} */
            [tagName]: WUP.Base.ReactHTML<WUPDateControl> & WUP.Date.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Form-control with datepicker
             *  @see {@link WUPDateControl} */
            [tagName]: HTMLAttributes<WUPDateControl> & WUP.Date.JSXProps;
        }
    }
}
/** Form-control with datepicker
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/control/date}
 * @tutorial Troubleshooting
 * * $options.format related only to displayed text, to work with other date-options like min/max use strict format 'YYYY-MM-DD'
 * @example
  const el = document.createElement("wup-date");
  el.$options.name = "dateOfBirthday";
  el.$initValue = "1990-10-24";
  el.$options.validations = { required: true };
  el.$options.format = "yyyy-MM-dd";
  const form = document.body.appendChild(document.createElement("wup-form"));
  form.appendChild(el);
  // or HTML
  <wup-form>
    <wup-date w-name="dateOfBirthday" w-utc w-initvalue="1990-10-24" w-min="1930-01-01" w-max="2010-01-01"/>
  </wup-form>; */
export default class WUPDateControl<ValueType extends Date = Date, TOptions extends WUP.Date.Options = WUP.Date.Options, EventMap extends WUP.Date.EventMap = WUP.Date.EventMap> extends WUPBaseComboControl<ValueType, TOptions, EventMap> {
    #private;
    static get $style(): string;
    static get mappedAttributes(): Record<string, AttributeMap>;
    static $defaults: WUP.Date.Options;
    get $initValue(): ValueType | undefined;
    set $initValue(v: ValueType | undefined);
    constructor();
    /** Parse string to Date
     * @see {@link WUPCalendarControl.$parse} */
    parse(text: string): ValueType | undefined;
    /** Called to parse input text to value (related to locale or pointed format)
     *  @tutorial Troubleshooting
     * * for "yyyy-mm-dd" the correct format is "yyyy-MM-dd" */
    parseInput(text: string): ValueType | undefined;
    canParseInput(_text: string): boolean;
    valueToStorage(v: ValueType): string;
    protected gotChanges(propsChanged: Array<keyof WUP.Date.Options> | null): void;
    protected get validations(): WUP.Text.Options["validations"];
    protected renderMenu(popup: WUPPopupElement, menuId: string): HTMLElement;
    protected setValue(v: ValueType | undefined, reason: SetValueReasons, skipInput?: boolean): boolean | null;
    protected valueToInput(v: ValueType | undefined): string;
    protected focusMenuItem(next: HTMLElement | null): void;
    protected focusMenuItemByKeydown(e: KeyboardEvent): void;
    /** Returns tied TimeControl related to option */
    get refTime(): WUPTimeControl | null;
    /** Set value if found tied timeControl@see refTime  */
    protected setTimeValue(elTime: WUPTimeControl | null, v: ValueType | undefined, reason: SetValueReasons): void;
    /** Called when possible need to update min/max/exclude for time control */
    protected setTimeValidations(elTime: WUPTimeControl): void;
}
export {};