Ngx-Bootstrap - DatePicker

Le composant ngx-bootstrap DatePicker est hautement configurable et personnalisable selon nos besoins. Il fournit diverses options pour sélectionner la date ou la plage de dates.

BsDatepickerDirective

sélecteur

  • [bsDatepicker]

Contributions

  • bsConfig - Partial <BsDatepickerConfig>, objet Config pour datepicker

  • bsValue - Date, valeur initiale du datepicker

  • container- string, Un sélecteur spécifiant l'élément auquel le sélecteur de date doit être ajouté. par défaut: corps

  • dateCustomClasses - DatepickerDateCustomClasses [], classes personnalisées de date

  • datesDisabled - Date [], désactiver des dates spécifiques

  • datesEnabled - Date [], activer des dates spécifiques

  • dateTooltipTexts - DatepickerDateTooltipText [], texte de l'info-bulle de date

  • daysDisabled - nombre [], désactiver certains jours de la semaine

  • isDisabled - booléen, indique si le contenu de datepicker est activé ou non

  • isOpen - booléen, retourne si le sélecteur de date est actuellement affiché ou non

  • maxDate - booléen, date maximum disponible pour la sélection

  • minDate - booléen, date minimum disponible pour la sélection

  • minMode - BsDatepickerViewMode, mode d'affichage minimum: jour, mois ou année

  • outsideClick - booléen, ferme le sélecteur de date lors d'un clic extérieur, par défaut: true

  • outsideEsc - booléen, ferme le sélecteur de date au clic d'échappement, par défaut: true

  • placement- "top" | "bas" | "gauche" | "right", placement d'un datepicker. Accepte: "haut", "bas", "gauche", "droite", par défaut: bas

  • triggers- string, spécifie les événements qui doivent se déclencher. Prend en charge une liste de noms d'événements séparés par des espaces., Par défaut: cliquez sur

Les sorties

  • bsValueChange - Emet lorsque la valeur de datepicker a été modifiée

  • onHidden - Émet un événement lorsque le sélecteur de date est masqué

  • onShown - Émet un événement lorsque le sélecteur de date est affiché

Méthodes

  • show()- Ouvre le sélecteur de date d'un élément. Ceci est considéré comme un déclenchement «manuel» du sélecteur de date.

  • hide()- Ferme le sélecteur de date d'un élément. Ceci est considéré comme un déclenchement «manuel» du sélecteur de date.

  • toggle()- Active / désactive le sélecteur de date d'un élément. Ceci est considéré comme un déclenchement «manuel» du sélecteur de date.

  • setConfig() - Définir la configuration pour le sélecteur de date

BsDaterangepickerDirective

sélecteur

  • [bsDaterangepicker]

Contributions

  • bsConfig - Partial <BsDaterangepickerConfig>, objet de configuration pour daterangepicker

  • bsValue - Date, valeur initiale du daterangepicker

  • container- string, Un sélecteur spécifiant l'élément auquel le daterangepicker doit être ajouté. par défaut: corps

  • dateCustomClasses - DatepickerDateCustomClasses [], classes personnalisées de date

  • datesDisabled - Date [], désactiver des dates spécifiques

  • datesEnabled - Date [], activer des dates spécifiques

  • dateTooltipTexts - DatepickerDateTooltipText [], texte de l'info-bulle de date

  • daysDisabled - nombre [], désactiver certains jours de la semaine

  • isDisabled - booléen, indique si le contenu de daterangepicker est activé ou non

  • isOpen - booléen, Retourne si le sélecteur de plage est actuellement affiché ou non

  • maxDate - booléen, date maximum disponible pour la sélection

  • minDate - booléen, date minimum disponible pour la sélection

  • minMode - BsDatepickerViewMode, mode d'affichage minimum: jour, mois ou année

  • outsideClick - booléen, Close daterangepicker sur le clic extérieur, par défaut: true

  • outsideEsc - booléen, ferme le sélecteur de plage lors du clic d'échappement, par défaut: true

  • placement- "top" | "bas" | "gauche" | "right", placement d'un daterangepicker. Accepte: "haut", "bas", "gauche", "droite", par défaut: bas

  • triggers- string, spécifie les événements qui doivent se déclencher. Prend en charge une liste de noms d'événements séparés par des espaces., Par défaut: cliquez sur

Les sorties

  • bsValueChange - Emet lorsque la valeur du sélecteur de gamme a été modifiée

  • onHidden - Émet un événement lorsque le daterangepicker est masqué

  • onShown - Émet un événement lorsque le daterangepicker est affiché

Méthodes

  • show()- Ouvre le sélecteur de date d'un élément. Ceci est considéré comme un déclenchement «manuel» du sélecteur de date.

  • hide()- Ferme le sélecteur de date d'un élément. Ceci est considéré comme un déclenchement «manuel» du sélecteur de date.

  • toggle()- Active / désactive le sélecteur de date d'un élément. Ceci est considéré comme un déclenchement «manuel» du sélecteur de date.

  • setConfig() - Définir la configuration pour le sélecteur de date

Exemple

Comme nous allons utiliser DatePicker et DateRangePicker, nous devons mettre à jour app.module.ts utilisé dans le chapitre ngx-bootstrap Collapse pour utiliserBsDatepickerModule et BsDatepickerConfig.

Mettez à jour app.module.ts pour utiliser BsDatepickerModule et 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 { }

Mettez à jour index.html pour utiliser le fichier 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>

Mettez à jour test.component.html pour utiliser les sélecteurs de date.

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>

Mettez à jour test.component.ts pour les variables et méthodes correspondantes.

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

Construire et servir

Exécutez la commande suivante pour démarrer le serveur angulaire.

ng serve

Une fois que le serveur est opérationnel. Ouvrez http: // localhost: 4200 et vérifiez la sortie suivante.