sgc-ng-datetime v0.0.1

SgcNgDatetime

Custom SGC-NG-DATETIME UI Components base on Angular and Material.

Data model

1. Default constructor to init Datetime data model (TSgcDatetimeDataDefault) TFieldFormDatetimeDataDefault is the default constructor for all Datetime field component base on TFieldFormEditData.

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 SgcNgDatetimeComponent inherit BaseFieldFormEditUI

2. Selector

<sgc-ng-datetime></sgc-ng-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-ng-datetime [(data)]="mydate"></sgc-ng-datetime>
    <sgc-ng-datetime [(data)]="mydatetime"></sgc-ng-datetime>