Skip to content

Date Picker Form Control

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

datePickerSettings_generated