libs/core/dynamic-form/date/src/date.model.ts
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];