Normal Date Picker
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Remark Date',
control: T.EDBMasterFormControl.date_picker,
path: 'remarkDate',
datePickerSettings: {
showTime: false,
showSeconds: false,
// dateTimeFormat: 'dd-MM-yyyy',
}
}]
]
}
};
Only Month Picker
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Birth Month',
control: T.EDBMasterFormControl.date_picker,
path: 'birth_month',
datePickerSettings: {
showTime: false,
showSeconds: false,
view: 'month',
dateTimeFormat: 'MM-yyyy',
}
}]
]
}
};
Only Time Picker
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Birth Time',
control: T.EDBMasterFormControl.date_picker,
path: 'birth_time',
datePickerSettings: {
timeOnly: true,
hourFormat: '12',
}
}]
]
}
};
Date Picker With Hooks
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Created At',
control: T.EDBMasterFormControl.date_picker,
path: 'createdAt',
datePickerSettings: {
jsCode: [{
appendTo: T.EDBMasterDatePickerAppendTo.ngModelChange,
code: `
console.log(event);
console.log(formData);
console.log(config);
console.log(column);
`,
}, {
appendTo: T.EDBMasterDatePickerAppendTo.blur,
code: `
console.log(formData);
`,
}, {
appendTo: T.EDBMasterDatePickerAppendTo.focus,
code: `
console.log(formData);
`,
}]
}
}]
]
}
};
Interface Documentation
/**
* Form field configuration for UI controls.
* Defines the appearance, behavior, and validation of individual form inputs.
*/
export interface IDBMasterConfigFormField {
/**
* Unique identifier for programmatic element access.
* Useful for dynamic field manipulation.
*/
hiddenId?: string;
/** Display label for the form field. */
label?: string;
/**
* Help text displayed below the control.
* Supports HTML formatting for rich content.
*/
helpText?: string;
/**
* Database field path where the control value is stored.
* Supports nested paths using dot notation.
* @example 'name', 'address.city', 'user.contact.email'
*/
path?: string;
/** Type of UI control to render. */
control?: EDBMasterFormControl;
/**
* CSS classes for the parent div wrapping the control.
* @default 'col-lg mt-4 col-md-{calculated based on columns.length}'
*/
cssClassDiv?: string;
/**
* Auto-focus this control when form opens.
* @default false
*/
autofocus?: boolean;
/**
* Disable the control or use expression to conditionally disable.
* When a string is provided, it's evaluated as JavaScript.
* @example true | false | "formData.type === 'readonly'"
*/
disabled?: boolean | string;
/**
* Control visibility or use expression to conditionally show/hide.
* When a string is provided, it's evaluated as JavaScript.
* @default true
* @example true | false | "formData.userRole === 'admin'"
*/
visible?: boolean | string;
/**
* Nested form fields for complex layouts.
* Enables hierarchical form structures within this field.
*/
fields?: IDBMasterConfigFormField[][];
/** Validation rules for this field. */
validations?: Pick<IPropertyValidation, 'required'> & {
/**
* Dynamic required validation function.
* Evaluated when form data changes to determine if field is required.
* Note: When present, this takes precedence over static 'required' property.
* @example "formData.type === 'individual' ? true : false"
*/
requiredFun?: string;
};
/** Custom validation error messages. */
validationErrors?: {
/** Custom error message for required field validation. */
required?: string;
};
/**
* It's value will be Date object.
* Date picker control configuration.
* Date and time selection with calendar popup.
* Stores value as JavaScript Date object.
*
* **Features:**
* - Date-only, time-only, or date-time modes
* - 12/24 hour format
* - Min/max date constraints
* - Custom date format display
* - Seconds display toggle
* - Inline calendar option
*
* @example
* // Basic date picker
* datePickerSettings: {
* placeholder: 'Select a date',
* dateTimeFormat: 'dd-MM-yyyy'
* }
*
* @example
* // Date and time picker with 12-hour format
* datePickerSettings: {
* showTime: true,
* hourFormat: '12',
* dateTimeFormat: 'dd-MM-yyyy hh:mm a'
* }
*
* @example
* // Time-only picker with seconds
* datePickerSettings: {
* timeOnly: true,
* hourFormat: '24',
* showSeconds: true,
* dateTimeFormat: 'HH:mm:ss'
* }
*
* @example
* // Date picker with range constraints
* datePickerSettings: {
* minDate: new Date(2020, 0, 1),
* maxDate: new Date(),
* dateTimeFormat: 'dd/MM/yyyy'
* }
*/
datePickerSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
showSeconds?: boolean;
showTime?: boolean;
/** Default : 24 */
hourFormat?: '12' | '24';
/** ex: dd-MM-yyyy hh:mm:ss a */
dateTimeFormat?: string;
/** Whether to display timepicker only. Use hourFormat 12 to display AM/PM in UI. */
timeOnly?: boolean;
/** The minimum selectable date. */
minDate?: Date;
/** The maximum selectable date. */
maxDate?: Date;
/**
* Default : date
* Update dateTimeFormat for 'month'(MM-yyyy) & 'year'(yyyy) values.
*/
view?: 'date' | 'month' | 'year';
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<br/>
* formData: any = Entire form object<br/>
* column: IDBMasterConfigFormField = Configuration of that form column. column.dropdownSettings?.dbData?.find will be query to get data. <br/>
* allDropdownDataMap: {[path: string]: any[]} = Map of all dropdown data<br/>
* globalData: any = User will send it using SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT event from parent. <br/>
* utils: any = Common utility functions for user to use. <br/>
* queryParams: any = Query params received from URL. <br/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterDatePickerAppendTo,
/**
* // dropdownData is available to use.
*
* // Return promise for long awaiting tasks.
* new Promise(async (resolve, reject) => {
* await new Promise(r => setTimeout(r, 3000));
* dropdownData[0].name = 'Sample data';
* resolve();
* });
*
* // Directly modify data of grid
* dropdownData[0].name = 'Sample data';
*
* // Return function
* (function setData() { dropdownData[0].name = 'Sample data'; } );
*
*/
code: string | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
}
/**
* Validation rules for schema properties and form fields.
* Define constraints that values must satisfy before being saved.
*/
export interface IPropertyValidation {
/**
* Field is mandatory and must have a non-null, non-empty value.
* Applicable to all data types.
*/
required?: boolean;
/**
* Minimum allowed value.
* Applicable to: number, date
*/
min?: number;
/**
* Maximum allowed value.
* Applicable to: number, date
*/
max?: number;
/**
* Minimum string/array length.
* Applicable to: string, array
*/
minLength?: number;
/**
* Maximum string/array length.
* Applicable to: string, array
*/
maxLength?: number;
/**
* Value must be unique across all records.
* @deprecated API Maker maintains uniqueness internally.
* Avoid using on tables with frequent updates due to performance impact.
*/
unique?: boolean;
/**
* Validate email address format.
* Applicable to: string
*/
email?: boolean;
/**
* Custom validation function.
* Return true if valid, false or error message if invalid.
*/
validatorFun?: Function;
/**
* Enumeration constraint - value must be from this array.
* @example ['active', 'inactive', 'pending']
*/
enum?: any[];
}
export enum EDBMasterDatePickerAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
focus = 'focus',
blur = 'blur',
}
/**
* Available form control types for UI generation.
* Each control type has specific settings and behavior.
*/
export enum EDBMasterFormControl {
/** Single-line text input. */
input = 'input',
/** Numeric input with spinner buttons and formatting. */
inputNumber = 'inputNumber',
/** Text input with pattern-based masking (phone, SSN, etc.). */
inputMask = 'inputMask',
/** One-time password multi-character input. */
inputOtp = 'inputOtp',
/** Password input with visibility toggle and strength meter. */
password = 'password',
/** Date and/or time picker with calendar popup. */
date_picker = 'date_picker',
/** Multi-line text input. */
textarea = 'textarea',
/** Rich text WYSIWYG editor. */
editor = 'editor',
/** Binary checkbox (true/false). */
checkbox = 'checkbox',
/** Radio button group for single selection. */
radio = 'radio',
/** Color picker with multiple format support. */
color_picker = 'color_picker',
/** Dropdown select with single selection. */
dropdown = 'dropdown',
/** Autocomplete with type-ahead search. */
auto_complete = 'auto_complete',
/** Multi-select dropdown with chip display. */
multi_select = 'multi_select',
/** File upload with validation. */
file_upload = 'file_upload',
/** Nested data grid for one-to-many relationships. */
grid = 'grid',
/** Visual separator line. */
divider = 'divider',
/** Star-based rating input. */
rating = 'rating',
/** Circular dial for numeric input. */
knob = 'knob',
/** Collapsible accordion panels (field container). */
accordion = 'accordion',
/** Tabbed view for organizing fields (field container). */
tab_view = 'tab_view',
/** Clickable button with custom actions. */
button = 'button',
/** Image display with preview. */
image = 'image',
/** Custom HTML content. */
customHTML = 'customHTML',
}
export enum EDBMasterCustomActionButtonAppendTo {
click = 'click',
}