Skip to main content

DateTime class

📖 Description​

The DateTime class defines a date/time selector control for the Tripetto builder. It is derived from the DataControl class.

📺 Preview​

🆕 constructor​

Creates a new DateTime instance.

Signature​

constructor(value?: number | Binding, style?: IDateTimeStyle): DateTime

Parameters​

NameTypeOptionalDescription
valuenumber | BindingYesSpecifies the initial value or a data binding created with bind.
styleIDateTimeStyleYesSpecifies the style (when omitted the default global style will be used).

Return value​

Returns a reference to the new DateTime instance.

📌 Statics​

🏷️ style​

Contains the global default style for the date/time control.

Type​

IDateTimeStyle

🔧 bind​

Binds an object property to the control allowing its value to update automatically when the value of the control changes. If the control is disabled or invisible, the supplied valueWhenInactive is automatically set as the property value. When a control is enabled and visible, the supplied defaultWhenActive is set automatically if the property value is currently not defined.

Signature​

bind<Target, P extends keyof Target>(
  target: Target,
  property: P,
  valueWhenInactive: number,
  defaultWhenActive?: number,
  modifier?: (value?: number) => number
): Binding;

Parameters​

NameTypeOptionalDescription
targetTargetNoReference to the target object which contains the property.
propertyPNoSpecifies the name of the property.
valueWhenInactivenumberNoSpecifies the value which is set to the property when the control is inactive (disabled or invisible).
defaultWhenActivenumberYesSpecifies the default (initial) value that will be used when the control is active (enabled and visible).
modifier(value?: number) => numberYesSpecifies a modifier function for the data.

Return value​

Returns a Binding instance that can be used in the controls constructor to bind a value to a control.

Example​

import { Forms } from "@tripetto/builder";

const example = {
  date: 0
};

const dateTime = new Forms.DateTime(Forms.DateTime.bind(example, "date", 0));

🗃️ Fields​

🏷️ dayOfMonth​

Sets or retrieves the day of the month.

Type​

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31

🏷️ hasFocus​

Retrieves if the control has input focus.

Type​

boolean

🏷️ hasValue​

Retrieves if the control has a value.

Type​

boolean

🏷️ hour​

Sets or retrieves the hour.

Type​

number

🏷️ isDisabled​

Sets or retrieves if the control is disabled.

Type​

boolean

🏷️ isLocked​

Sets or retrieves if the control is locked (readonly).

Type​

boolean

🏷️ isObservable​

Retrieves if the control is observable.

Type​

boolean

🏷️ isRequired​

Sets or retrieves if the control is required.

Type​

boolean

🏷️ isVisible​

Sets or retrieves the visibility of the control.

Type​

boolean

🏷️ minute​

Sets or retrieves the minute.

Type​

number

🏷️ month​

Sets or retrieves the month.

Type​

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11

🏷️ second​

Sets or retrieves the second.

Type​

number

🏷️ style​

Contains the style for the date/time control.

Type​

IDateTimeStyle

🏷️ value​

Sets or retrieves the selected value.

Type​

number

🏷️ year​

Sets or retrieves the year.

Type​

number

▶️ Methods​

🔧 blur​

Blurs the focus of the control.

Signature​

blur(): void

🔧 disable​

Disables the control.

Signature​

disable(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 disabled​

Specifies the state of the control.

Signature​

disabled(disabled?: boolean): this

Parameters​

NameTypeOptionalDescription
disabledbooleanYesSpecifies if the control is disabled (default is true).

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 enable​

Enables the control.

Signature​

enable(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 features​

Specifies the date control features which should be enabled.

Signature​

features(features: DateTimeFeatures): this

Parameters​

NameTypeOptionalDescription
featuresDateTimeFeaturesNoSpecifies the features which should be enabled.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 focus​

Sets the focus to the control.

Signature​

focus(): boolean

Return value​

Returns true if the focus is set.

🔧 hide​

Hides the control.

Signature​

hide(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 indent​

Enables control indentation. This can only be set during construction.

Signature​

indent(size: number): this

Parameters​

NameTypeOptionalDescription
sizenumberNoSpecifies the indent size in pixels.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 interval​

Specifies the minute/second interval.

Signature​

interval(interval: number): this

Parameters​

NameTypeOptionalDescription
intervalnumberNoSpecifies the interval.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 label​

Sets the label for the control.

tip

If you want to use markdown in the label, activate it first using the markdown method.

Signature​

label(label: string): this

Parameters​

NameTypeOptionalDescription
labelstringNoSpecifies the control label.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 lock​

Locks the control.

Signature​

lock(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 locked​

Specifies if the control is locked (readonly).

Signature​

locked(locked?: boolean): this

Parameters​

NameTypeOptionalDescription
lockedbooleanYesSpecifies if the control is locked/readonly (default is true).

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 markdown​

Specifies if the label should support markdown formatting.

Signature​

markdown(options?: IMarkdownOptions): this

Parameters​

NameTypeOptionalDescription
optionsIMarkdownOptionsYesSpecifies the markdown options.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 on​

Specifies the function which is invoked when the date is changed.

Signature​

on(fn: (date: DateTime) => void): this

Parameters​

NameTypeOptionalDescription
fn(date: DateTime) => voidNoSpecifies the change function.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 placeholder​

Sets a placeholder for the control.

Signature​

placeholder(placeholder: string): this

Parameters​

NameTypeOptionalDescription
placeholderstringNoSpecifies the placeholder string.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 readonly​

Makes the control readonly.

Signature​

readonly(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 require​

Makes the control required.

Signature​

require(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 required​

Specifies if the control is required.

Signature​

required(required?: boolean): this

Parameters​

NameTypeOptionalDescription
requiredbooleanYesSpecifies if the control is required (default is true).

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 show​

Shows the control.

Signature​

show(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 showDayOfMonthSelector​

Shows the day of month selector.

Signature​

showDayOfMonthSelector(): void

🔧 showHourSelector​

Shows the hour selector.

Signature​

showHourSelector(): void

🔧 showMinuteSelector​

Shows the minute selector.

Signature​

showMinuteSelector(): void

🔧 showMonthSelector​

Shows the month selector.

Signature​

showMonthSelector(): void

🔧 showOptions​

Shows the options menu.

Signature​

showOptions(): void

🔧 showSecondSelector​

Shows the seconds selector.

Signature​

showSecondSelector(): void

🔧 showWeekdaySelector​

Shows the weekday selector.

Signature​

showWeekdaySelector(): void

🔧 showYearSelector​

Shows the year selector.

Signature​

showYearSelector(): void

🔧 unlock​

Unlocks the control.

Signature​

unlock(): this

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 visible​

Specifies the visibility of the control.

Signature​

visible(visible?: boolean): this

Parameters​

NameTypeOptionalDescription
visiblebooleanYesSpecifies if the control is visible (default is true).

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 width​

Sets the width of the control.

Signature​

width(width: number | "auto" | "full"): this

Parameters​

NameTypeOptionalDescription
widthnumber | "auto" | "full"NoSpecifies the control width in pixels or sets the width to auto or full.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 years​

Specifies the years range.

Signature​

years(from: number, to: number): this

Parameters​

NameTypeOptionalDescription
fromnumberNoSpecifies the from year.
tonumberNoSpecifies the to year.

Return value​

Returns a reference to the DateTime instance to allow chaining.

🔧 zone​

Specifies the date zone.

Signature​

zone(zone: "local" | "UTC"): this

Parameters​

NameTypeOptionalDescription
zone"local" | "UTC"NoSpecifies the date zone (local or UTC).

Return value​

Returns a reference to the DateTime instance to allow chaining.

⛓️ Interfaces​

🔗 IDateTimeStyle​

Describes the interface for the date/time styles.

Type declaration​

interface IDateTimeStyle {
  /* Specifies the control height. */
  height: number;

  /* Date/time appearance. */
  appearance?: IStyles;

  /* Date appearance. */
  date?: IStyles;

  /* Time appearance. */
  time?: {
    /* Time appearance. */
    appearance?: IStyles;

    /* Hour-minute digit separator. */
    hourMinuteSeparator?: IStyles;

    /* Minute-second digit separator. */
    minuteSecondSeparator?: IStyles;
  };

  /* Date plane appearance. */
  plane?: {
    /* Idle appearance. */
    appearance: IStyles;

    /* Hover appearance. */
    hover?: IStyles;

    /* Selected appearance. */
    selected?: IStyles;

    /* Focus style. */
    focus?: IStyles;

    /* Selector menu style. */
    selector?: IMenuStyle;
  };

  /* Spacing in pixels between the date and time. */
  spacing?: number;

  /* Placeholder style. */
  placeholder?: {
    /* Base appearance. */
    appearance: IStyles;

    /* Text appearance. */
    text: IStyles;
  };

  /* Date label. */
  label?: IStyles;

  /* Date disabled. */
  disabled?: IStyles;

  /* Date required. */
  required?: IStyles;

  /* Date locked. */
  locked?: IStyles;

  /* Date focus. */
  focus?: IStyles;

  /* Date hover. */
  hover?: IStyles;

  /* Validation passed. */
  passed?: IStyles;

  /* Validation failed. */
  failed?: IStyles;

  /* Validation awaiting. */
  awaiting?: IStyles;

  /* Date appearance when fused with the form card. */
  fused?: {
    /* Date appearance. */
    appearance?: IStyles;

    /* Date label. */
    label?: IStyles;

    /* Date required. */
    required?: IStyles;

    /* Date locked. */
    locked?: IStyles;

    /* Date focus. */
    focus?: IStyles;

    /* Date hover. */
    hover?: IStyles;

    /* Validation passed. */
    passed?: IStyles;

    /* Validation failed. */
    failed?: IStyles;

    /* Validation awaiting. */
    awaiting?: IStyles;
  };

  /* Contains text labels. */
  labels: {
    /* Enable date. */
    enable: string;

    /* Disable date. */
    disable: string;

    /* Reset date. */
    reset?: string;
  };
}

📇 Enums​

📇 DateTimeFeatures​

Describes the enum for the date/time features.

Type declaration​

enum DateTimeFeatures {
  /* Specifies if a date can be set. */
  Date = 1,

  /* Specifies if a time can be set. */
  Time = 2,

  /* Specifies if the minutes can be set. */
  TimeHoursOnly = 4,

  /* Specifies if the seconds can be set. */
  TimeHoursAndMinutesOnly = 8,

  /* Specifies if the control has a reset option. */
  NoResetOption = 16,

  /* Specifies if the control shows the weekday. */
  Weekday = 32,

  /* Specifies the default features. */
  Default = 35
}