Sorgente

La libreria Datepicker è stata presa da questo indirizzo: https://www.npmjs.com/package/@angular-material-components/datetime-picker

il picker prende in input una data che può essere [stringa + inputFormat], [Date] oppure [moment]
trasforma quel che arriva in [moment] per i prodotti interni e in [Date] per il datepicker
in output può rendere [stringa in outputFormat] o una [Date]

$3

`` TS
// label che appare sopra al selettore
@Input() title: string = "";
// valori selezionabili
@Input() values: string[] = [];
// valore selezionato
@Input() selectedValue: string | null = null;
// robe per lo stile
@Input() idHtmlPrefix: string = '';
@Input() scrollBehavior: ScrollBehavior = 'smooth';

// OUTPUT
@Output() onSelectedValue = new EventEmitter();

`

$3

` ts
// INPUT
@Input() debugMode: boolean = false;
// Comune a tutti i componenti
/// viene passato se ho direttametne la variabile in input
@Input() ngModelInput: any = null;

/// vengono passati se il dato viene da un modulo
/// FormGroup del componente chiamante
@Input() formGroupInput: any = null;
/// Nome del Controller del FormGroup del componente chiamante
@Input() formControlNameInput: any = null;

/// modalità di funzionamento
@Input() pickerMode: ModeEnum = ModeEnum.BIRTHPICKER;
/// tipo di dato in output
@Input() timeType: TimeTypeEnum = TimeTypeEnum.DATE;
/// in input la data è UTC
// @Input() UTCDate: boolean = true;

/// Placeholder in caso di input nullo
@Input() placeholder: string = "Inserisci una data/ora";

/// data minima per datepicker
@Input() minDate: Date | null = null;
//// data massima per datepicker
@Input() maxDate: Date | null = null;

/// lingua locale boh "it-IT"
@Input() locale: string = "it-IT";
/// formato input della data
/// https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
@Input() inputFormat: string = '';
/*
// se è impostato il valore di 'default' il sistema imposta i propri
if(this.inputFormat == 'default'){
if (this.pickerMode == ModeEnum.DATETIMEPICKER){
this.inputFormat = "DD/MM/yyyy HH:mm:ss";
}
if (this.pickerMode == ModeEnum.DATEPICKER){
this.inputFormat = "DD/MM/yyyy";
}
if (this.pickerMode == ModeEnum.TIMEPICKER){
this.inputFormat = "HH:mm:ss";
}
if (this.pickerMode == ModeEnum.BIRTHPICKER){
this.inputFormat = "DD/MM/yyyy";
}
if (this.pickerMode == ModeEnum.TIMESTEPPERPICKER){
this.inputFormat = "HH:mm:ss";
}
}
*/
/// formato output della data
/// https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
@Input() outputFormat: string = "DD/MM/yyyy HH:mm:ss";
/// Serve per generare una data con GMT opposto in modo che a db venga salvata la data locale
@Input() forSaveLocalOnDB: boolean = false;

/// campo disabilitato
@Input() disabled: boolean = false;
/// campo readonly
@Input() readonly: boolean = false;

// INPUT Datepicker
@Input() currentDateAsDefault: boolean = false;
@Input() showSpinners: boolean = true;
@Input() touchUi: boolean = false;
@Input() enableMeridian: boolean = false;
@Input() hideTime: boolean = true; // Mostriamo solo il Datepicker, il Time verrà personalizzato


// INPUT Timepicker
@Input() stepHour: number = 1;
@Input() showHours: boolean = true;
@Input() hourLabel: string = "";
@Input() stepMinute: number = 1;
@Input() showMinutes: boolean = true;
@Input() minuteLabel: string = "";
@Input() stepSecond: number = 1;
@Input() showSeconds: boolean = true;
@Input() secondLabel: string = "";
@Input() disableMinute: boolean = false; //boh

// INPUT BirthPicker
@Input() dayLabel: string = "";
@Input() monthLabel: string = "";
@Input() yearLabel: string = "";
`

$3

` ts
// OUTPUT
// Comune a tutti i componenti
@Output() ngModelInputChange: EventEmitter = new EventEmitter();
`

$3

` html

PICKER

[title]="'picker'"
[values]="stringArray"
[selectedValue]="stringSelected"
[idHtmlPrefix]="'string_prefix'"
[scrollBehavior]="'smooth'"
(onSelectedValue)="selectString($event)"
>

BIRTHPICKER {{birth}}

[placeholder]="'Inserisci una data o ora'"
[formGroupInput]="formPicker"
[formControlNameInput]="'Birth'"
(ngModelInputChange)="logBirth($event)"
[currentDateAsDefault]="true"
[outputFormat]="'yyyy-MM-DD'"
[timeType]="timeType.DATE"
[inputFormat]="inputFormat"
[dayLabel]="'giorno'"
[monthLabel]="'messe'"
[yearLabel]="'anno'"
[pickerMode]="mode.BIRTHPICKER">

DATEPICKER {{date}}

[placeholder]="'Inserisci una data o ora'"
[formGroupInput]="formPicker"
[formControlNameInput]="'Date'"
[(ngModelInput)]="date"
[currentDateAsDefault]="true"
[timeType]="timeType.DATE"
[inputFormat]="inputFormat"
[outputFormat]="'yyyy-MM-DD'"
[pickerMode]="mode.DATEPICKER">

DATETIMEPICKER {{datetime}}

[placeholder]="'Inserisci una data o ora'"
[formGroupInput]="formPicker"
[formControlNameInput]="'DateTime'"
(ngModelInputChange)="logDateTime($event)"
[currentDateAsDefault]="true"
[timeType]="timeType.STRING"
[showHours]="true"
[showMinutes]="true"
[showSeconds]="false"
[inputFormat]="inputFormat"
[outputFormat]="'yyyy-MM-DD HH:mm'"
[pickerMode]="mode.DATETIMEPICKER"
[hourLabel]="'ora'"
[minuteLabel]="'minuto'"
[secondLabel]="'secondo'">

TIMEPICKER {{time}}

[placeholder]="'Inserisci una data o ora'"
[formGroupInput]="formPicker"
[formControlNameInput]="'Time1'"
(ngModelInputChange)="logTime($event)"
[currentDateAsDefault]="true"
[timeType]="timeType.STRING"
[inputFormat]="'hh:mm'"
[outputFormat]="'HH:mm'"
[stepHour]="1"
[showHours]="true"
[stepMinute]="10"
[showMinutes]="true"
[stepSecond]="30"
[showSeconds]="false"
[pickerMode]="mode.TIMEPICKER">

TIMEPICKER {{time}} ret date

[debugMode]="true"
[placeholder]="'Inserisci una data o ora'"
[formGroupInput]="formPicker"
[formControlNameInput]="'Time1'"
[(ngModelInput)]="time"
[currentDateAsDefault]="true"
[timeType]="timeType.STRING"
[inputFormat]="'HH:mm'"
[outputFormat]="'HH:mm'"
[stepHour]="1"
[showHours]="true"
[stepMinute]="10"
[showMinutes]="true"
[stepSecond]="30"
[showSeconds]="false"
[pickerMode]="mode.TIMEPICKER">

TIMESTEPPERPICKER {{datetime}}

[placeholder]="'Inserisci una data o ora'"
[formGroupInput]="formPicker"
[formControlNameInput]="'DateTime'"
(ngModelInputChange)="logTime($event)"
[currentDateAsDefault]="true"
[timeType]="timeType.STRING"
[showHours]="true"
[showMinutes]="true"
[showSeconds]="false"
[outputFormat]="'HH:mm'"
[pickerMode]="mode.TIMESTEPPERPICKER"
[hourLabel]="'ora'"
[minuteLabel]="'minuto'"
[secondLabel]="'secondo'"
[maxDate]="minDate">

`

` ts

timeType = TimeTypeEnum;
mode= ModeEnum;
inputFormat: string = "yyyy-MM-DD";
inputTimeFormat: string = "HH:mm";
formPicker!: FormGroup;
minDate: Date = new Date(Date.now());
maxDate: Date = new Date();
loaded: boolean = false;

birth: any;
date: any;
time: any;
datetime: any;

stringArray = [ 'a', 'b', 'c','d','e','f'];
stringSelected = 'b';

intervalCounter = 0;

constructor(
private formBuilder: FormBuilder,
) { }

ngOnInit(): void {
this.birth = new Date(+'1975', +'04', +'14'); // "1975-03-15";
this.date = new Date( Date.now() ); //"1975-03-15 10:30";
this.time = new Date( Date.now() );// "06:00";
this.datetime = new Date( Date.now() ); // "1975-03-15 10:30";
//this.minDate.setDate(this.minDate.getDate() - 1);
//this.maxDate.setDate(this.maxDate.getDate() + 1);
this.createForm();
this.loaded=true
let myInterval = setInterval(() => {
this.time = '00:00'
if(this.intervalCounter < 5){
this.intervalCounter++
} else {
clearInterval(myInterval);
}
}, 5000)
}

createForm(): void {
this.formPicker = this.formBuilder.group({
Birth: [this.birth, Validators.required],
Date: [this.date, Validators.required],
DateTime: [this.datetime, Validators.required],
Time1: [this.time, Validators.required],
});
}

logBirth(event: any){
console.log("FINAL LOG", event);
this.birth = event;
}

logTime(event: any){
console.log("FINAL LOG", event);
// this.time = event;
}

logDate(event: any){
console.log("FINAL LOG", event);
// this.date = event;
console.log(this.formPicker)
}

logDateTime(event: any){
console.log("FINAL LOG", event);
this.datetime = event;
}

selectString(event: any){
console.log("FINAL STRING", event);
this.datetime = event;
}


``