Ngx-Bootstrap - DatePicker

Il componente ngx-bootstrap DatePicker è altamente configurabile e personalizzabile secondo le nostre necessità. Fornisce varie opzioni per selezionare la data o l'intervallo di date.

BsDatepickerDirective

selettore

[bsDatepicker]

Ingressi

bsConfig - Parziale <BsDatepickerConfig>, oggetto Config per datepicker
bsValue - Data, valore iniziale del datepicker
container- string, un selettore che specifica l'elemento a cui aggiungere il datepicker. predefinito: corpo
dateCustomClasses - DatepickerDateCustomClasses [], Date classi personalizzate
datesDisabled - Data [], disabilita date specifiche
datesEnabled - Data [], Abilita date specifiche
dateTooltipTexts - DatepickerDateTooltipText [], testo della descrizione comando data
daysDisabled - numero [], Disabilita alcuni giorni della settimana
isDisabled - booleano, indica se il contenuto di datepicker è abilitato o meno
isOpen - booleano, Restituisce se il datepicker è attualmente mostrato o meno
maxDate - booleano, data massima disponibile per la selezione
minDate - booleano, data minima disponibile per la selezione
minMode - BsDatepickerViewMode, modalità di visualizzazione minima: giorno, mese o anno
outsideClick - booleano, Chiudi datepicker al clic esterno, impostazione predefinita: true
outsideEsc - booleano, Chiudi datepicker al clic di uscita, impostazione predefinita: true
placement- "top" | "fondo" | "sinistra" | "right", posizionamento di un datepicker. Accetta: "in alto", "in basso", "sinistra", "destra", impostazione predefinita: in basso
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi., Impostazione predefinita: clic

Uscite

bsValueChange - Emette quando il valore di datepicker è stato modificato
onHidden - Emette un evento quando il datepicker è nascosto
onShown - Emette un evento quando viene mostrato il datepicker

Metodi

show()- Apre il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
hide()- Chiude il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
toggle()- Attiva o disattiva il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
setConfig() - Imposta la configurazione per datepicker

BsDaterangepickerDirective

selettore

[bsDaterangepicker]

Ingressi

bsConfig - Parziale <BsDaterangepickerConfig>, oggetto Config per daterangepicker
bsValue - Data, valore iniziale di daterangepicker
container- string, un selettore che specifica l'elemento a cui aggiungere il daterangepicker. predefinito: corpo
dateCustomClasses - DatepickerDateCustomClasses [], Date classi personalizzate
datesDisabled - Data [], disabilita date specifiche
datesEnabled - Data [], Abilita date specifiche
dateTooltipTexts - DatepickerDateTooltipText [], testo della descrizione comando data
daysDisabled - numero [], Disabilita alcuni giorni della settimana
isDisabled - booleano, indica se il contenuto di daterangepicker è abilitato o meno
isOpen - booleano, Restituisce se il daterangepicker è attualmente visualizzato o meno
maxDate - booleano, data massima disponibile per la selezione
minDate - booleano, data minima disponibile per la selezione
minMode - BsDatepickerViewMode, modalità di visualizzazione minima: giorno, mese o anno
outsideClick - booleano, Chiudi daterangepicker al clic esterno, impostazione predefinita: true
outsideEsc - booleano, Chiudi daterangepicker al clic di uscita, impostazione predefinita: true
placement- "top" | "fondo" | "sinistra" | "right", Posizionamento di un daterangepicker. Accetta: "in alto", "in basso", "sinistra", "destra", impostazione predefinita: in basso
triggers- stringa, specifica gli eventi che dovrebbero attivarsi. Supporta un elenco di nomi di eventi separati da spazi., Impostazione predefinita: clic

Uscite

bsValueChange - Emette quando il valore di daterangepicker è stato modificato
onHidden - Emette un evento quando il daterangepicker è nascosto
onShown - Emette un evento quando viene mostrato il daterangepicker

Metodi

show()- Apre il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
hide()- Chiude il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
toggle()- Attiva o disattiva il datepicker di un elemento. Questo è considerato un trigger "manuale" del datepicker.
setConfig() - Imposta la configurazione per datepicker

Esempio

Dato che utilizzeremo DatePicker e DateRangePicker, dobbiamo aggiornare app.module.ts utilizzato nel capitolo Comprimi ngx-bootstrap da utilizzareBsDatepickerModule e BsDatepickerConfig.

Aggiorna app.module.ts per utilizzare BsDatepickerModule e BsDatepickerConfig.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot()
   ],
   providers: [AlertConfig, BsDatepickerConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aggiorna index.html per utilizzare bs-datepicker.css.

app.module.ts

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
      <link href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet" >
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Aggiorna test.component.html per utilizzare i datepicker.

test.component.html

<div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Datepicker"
         class="form-control"
         bsDatepicker
         [bsValue]="bsValue"
         [minDate]="minDate"
         [maxDate]="maxDate"
         [daysDisabled]="[6,0]"
         [datesDisabled]="disabledDates"
         [bsConfig]="{ isAnimated: true, dateInputFormat: 'YYYY-MM-DD' }">
   </div>
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker
         [(ngModel)]="bsRangeValue"
         [datesEnabled]="enabledDates"
         [bsConfig]="{ isAnimated: true }">
   </div>
</div>

Aggiorna test.component.ts per le variabili e i metodi corrispondenti.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   bsValue = new Date();
   bsRangeValue: Date[];
   maxDate = new Date();
   minDate = new Date();

   constructor() {
      this.minDate.setDate(this.minDate.getDate() - 1);
      this.maxDate.setDate(this.maxDate.getDate() + 7);
      this.bsRangeValue = [this.bsValue, this.maxDate];
   }

   ngOnInit(): void {
   }
}

Costruisci e servi

Eseguire il seguente comando per avviare il server angolare.

ng serve

Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.