StraMa87

ngx-datapicker-material

Jan 26th, 2021 (edited)
741
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ///////////////////// Component HTML //////////////////////////
  2.  
  3.  <form [formGroup]="dataSearch">
  4.         <mat-form-field fxShow fxHide.lt-lg style="width: 250px;">
  5.         <mat-label for='calendar-input'>{{ "NAV.RANGEDATA" | translate }}</mat-label>
  6.         <input type="text" id="calendar-input"  matInput ngxDaterangepickerMd [locale]="locale"
  7.         [showDropdowns]="true" [showClearButton]="true" showCancel="true" formControlName='data'
  8.           readonly />
  9.       <mat-icon class="ngx-daterangepicker-action" matSuffix (click)="openCalendar()">
  10.          calendar_today</mat-icon>
  11.       </mat-form-field>
  12. </form>
  13.  
  14. ////////////////////////////////  Component ts ////////////////////////////////////////////////////
  15.  
  16. dataInizio:string;
  17. dataFine:string;
  18. dataSearch:FormGroup;
  19.  
  20. locale:LocaleConfig = {
  21.     format:'YYYY-MM-DD',
  22.     displayFormat:'DD-MM-YYYY',
  23.     cancelLabel: 'Close', // detault is 'Cancel'
  24.     applyLabel: 'Ok', // detault is 'Apply'
  25.     clearLabel: 'Clear', // detault is 'Clear'        
  26. }
  27.  
  28. @ViewChild(DaterangepickerDirective, {static:false}) picker:DaterangepickerDirective;
  29.  
  30.  
  31. ngOninit() : void{
  32.      this.dataInizio = moment().format("YYYY-MM-DD");
  33.         this.dataFine = moment().subtract(10, 'days').format("YYYY-MM-DD");
  34.         this.dataSearch = new FormGroup({
  35.             data:new FormControl(`${this.dataInizio} - ${this.dataFine}`) // anche se inserisco questo oggetto
  36.         });                                                              // {startDate:"26-01-2021, endDate:"01-01-2021"}
  37.                                                                         // restituisce sempre il primo valore
  38. }
  39.  
RAW Paste Data