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]

PICKER I/O

  // 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<string>();
  

DATETIMEPICKER INPUT

  // 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 = "";

DATETIMEPICKER OUTPUT

  // OUTPUT
  // Comune a tutti i componenti
  @Output() ngModelInputChange: EventEmitter<any> = new EventEmitter<any>();

esempi

  <div>
    <p>PICKER</p>
    <tmw-picker
      [title]="'picker'"
      [values]="stringArray"
      [selectedValue]="stringSelected"
      [idHtmlPrefix]="'string_prefix'"
      [scrollBehavior]="'smooth'"
      (onSelectedValue)="selectString($event)"
    >
    </tmw-picker>
  </div>

    <p>BIRTHPICKER {{birth}}</p>
    <tmw-datetimepicker
      [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">
    </tmw-datetimepicker>


    <p>DATEPICKER {{date}}</p>
    <tmw-datetimepicker
      [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">
    </tmw-datetimepicker>


    <p>DATETIMEPICKER {{datetime}}</p>
    <tmw-datetimepicker
      [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'">
    </tmw-datetimepicker>

    
    <p>TIMEPICKER {{time}}</p>
    <tmw-datetimepicker
      [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">
    </tmw-datetimepicker>
    
    
    <p>TIMEPICKER {{time}} ret date</p>
    <tmw-datetimepicker
      [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">
    </tmw-datetimepicker>


    <p>TIMESTEPPERPICKER {{datetime}}</p>
    <tmw-datetimepicker
      [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">
    </tmw-datetimepicker>    

  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;
  }