File

libs/core/dynamic-form/date/src/date.model.ts

Extends

DfDateBaseConfig

Index

Properties

Properties

mode
Description

When set to "monthYearOnly", the user cannot choose a day. Day will always be set to 01.

startView (Optional)
Type DfDateStartViewTypeMonthYearOnly
import { DfInteractiveBaseConfig, SingleInputFieldLayout } from '@allianz/taly-core/dynamic-form';

/**
 * The value to use for the `type` attribute of date
 * formfield configs.
 */
export const DfDateTypeName = 'DATE';
/**
 * The value options to use for the `mode` attribute of date
 * formfield configs.
 */
export const DfDateMonthYearOnlyMode = 'monthYearOnly';
export const DfDateYearOnlyMode = 'yearOnly';
export const DfDateFullDateMode = 'fullDate';
export type DfDateMode =
  | typeof DfDateMonthYearOnlyMode
  | typeof DfDateYearOnlyMode
  | typeof DfDateFullDateMode;

/**
 * Available views that the date picker's calendar can start with.
 *
 * month: Start the calendar on the month view, which shows all days of that month.
 * year: Start the calendar on the year view, which shows all months of that year.
 * multi-year: Start the calendar on the multi-year view, which shows a range of years.
 */
export const DfDateStartViewTypeFullDate = {
  Month: 'month',
  Year: 'year',
  MultiYear: 'multi-year'
} as const;
export type DfDateStartViewTypeFullDate =
  (typeof DfDateStartViewTypeFullDate)[keyof typeof DfDateStartViewTypeFullDate];

export const DfDateStartViewTypeMonthYearOnly = {
  Year: 'year',
  MultiYear: 'multi-year'
} as const;

export type DfDateStartViewTypeMonthYearOnly =
  (typeof DfDateStartViewTypeMonthYearOnly)[keyof typeof DfDateStartViewTypeMonthYearOnly];

/**
 * Configuration for a date input field.
 */
export interface DfDateBaseConfig extends DfInteractiveBaseConfig, SingleInputFieldLayout {
  /**
   * Specifies the mode of the date input field.
   * Determines the level of granularity for date selection:
   * - `monthYearOnly`: Allows selection of only month and year.
   * - `yearOnly`: Allows selection of only the year.
   * - `fullDate`: Allows selection of the full date (day, month, year).
   */
  mode: DfDateMode;
  /**
   * The parse format for the date input.
   *
   * The formats are dependent on the date-adapter.
   *
   * Day.js formats: https://day.js.org/docs/en/parse/string-format
   *
   * Refer the NDBX datefield documentation for details:
   * https://api-test.allianz.com/ngx-ndbx-next/documentation/datefield
   */
  parseFormat?: string | string[];
  /**
   * The display format for the date input.
   *
   * Refer the NDBX datefield documentation for details:
   * https://api-test.allianz.com/ngx-ndbx-next/documentation/datefield
   */
  displayFormat?: string;
  /**
   * The value can be a Date or a string with "TODAY", "TOMORROW" or "YESTERDAY"
   * In those cases, the datepicker starts prefilled with those dates.
   */
  value?: DfDateDefaultValues | unknown;

  /**
   * Specifies the type of the field as `DATE`.
   */
  type: typeof DfDateTypeName;

  /**
   * This field's label.
   * It's translatable by default and supports string interpolation.
   * @examples ["My label", "My label {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * Placeholder to be displayed in the field when the input is empty.
   * It's translatable by default and supports string interpolation.
   * @examples ["Placeholder", "Placeholder with dynamic value {$['bb-pgr-simple'].date}"]
   */
  placeholder?: string;

  /**
   * The date on which to open the calendar initially.
   *
   * Note that this is not the same thing as the date field's initial value, which
   * still defaults to empty.
   */
  startAt?: string;

  /**
   * The ndbx date picker supports a non-strict parsing. This
   * makes it possible to enter dates without separators like / or .
   *
   * When the non strict parsing is active, the datepicker will also automatically
   * format the date to what it detected.
   */
  nonStrictParsing?: boolean;

  /**
   * Classes to be passed to the date picker panel. Supports the same syntax as ngClass.
   */
  panelClass?: string | string[];

  /*
   * Boolean to hide the calendar picker
   */
  hideCalendarPicker?: boolean;

  /**
   * Prefix text to place at the start of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputPrefix?: string;

  /**
   * Suffix text to place at the end of this field's input.
   * It's translatable by default and supports string interpolation.
   */
  inputSuffix?: string;

  /**
   * Text that is additionally displayed in the label if the field is not mandatory.
   * @examples ["Optional"]
   */
  optionalLabel?: string;
}

interface DfDateConfigMonthYearOnly extends DfDateBaseConfig {
  /**
   * When set to "monthYearOnly", the user cannot choose a day.
   * Day will always be set to 01.
   */
  mode: typeof DfDateMonthYearOnlyMode;
  startView?: DfDateStartViewTypeMonthYearOnly;
}

interface DfDateConfigYearOnly extends DfDateBaseConfig {
  /**
   * When set to "yearOnly", the user cannot choose a day or a month.
   * Day and month will always be set to 01.
   */
  mode: typeof DfDateYearOnlyMode;
  parseFormat?: never;
  displayFormat?: never;
  startView?: never;
}

// default case, allow all format fields
interface DfDateConfigFull extends DfDateBaseConfig {
  mode: typeof DfDateFullDateMode;
  /**
   * The view that the calendar should start with.
   *
   * Defaults to month.
   */
  startView?: DfDateStartViewTypeFullDate;
}

export type DfDateConfig = DfDateConfigMonthYearOnly | DfDateConfigYearOnly | DfDateConfigFull;

/**
 * Default values for the DATE
 */
export const DfDateDefaultValues = {
  Yesterday: 'YESTERDAY',
  Today: 'TODAY',
  Tomorrow: 'TOMORROW'
} as const;
export type DfDateDefaultValues = (typeof DfDateDefaultValues)[keyof typeof DfDateDefaultValues];

results matching ""

    No results matching ""