SgcUiDatetime

Custom SGC Datetime UI Components.

Data model

1. Default constructor to init Datetime data model (TSgcDatetimeDataDefault)

export const defaultYearFormat: string = 'yyyy';
export const defaultMonthFormat: string = 'mm';
export const defaultDayFormat: string = 'dd';
export const defaultHourFormat: string = 'hh';
export const defaultMinuteFormat: string = 'mm';

export const defaultSeparatorDateFormat: string = '/';
export const defaultSeparatorDateToTimeFormat: string = ',';
export const defaultSeparatorTimeFormat: string = ':';
export const defaultShowTime: boolean = true;

const TFieldFormDatetimeDataDefault : TFieldFormEditData = {
    ...TFieldFormEditDefault,
    dateFormat : defaultDayFormat + defaultMonthFormat + defaultYearFormat,
    dateSepFormat: defaultSeparatorDateFormat,
    showTime: defaultShowTime,
    typeFieldForm:TypeFieldFormEdit.DATE_HEURE
  }

Datetime UI Component

1. Component SgcUiDatetimeComponent inherit BaseFieldFormEditUI

2. Selector

<sgc-ui-datetime></sgc-ui-datetime>

2. Example

//--- Declare and Init TFieldFormEditData variable
class AppComponent implements OnInit {
  mydate!: TFieldFormEditData; //-- Only show Date
  mydatetime!: TFieldFormEditData; //-- Show date and time 

ngOnInit() {
    this.mydate={...TSgcDatetimeDataDefault, name:'date1', label: 'Date 1', required:true, dateSepFormat:'/', showTime:false};
    this.mydatetime= {...TSgcDatetimeDataDefault, name:'date2', label: 'Date 2', required:true, dateSepFormat:'-', showTime:true};
    }
  }

    <sgc-ui-datetime [(data)]="mydate"></sgc-ui-datetime>
    <sgc-ui-datetime [(data)]="mydatetime"></sgc-ui-datetime>