Ngx-Bootstrap - DatePicker

El componente ngx-bootstrap DatePicker es altamente configurable y personalizable según nuestras necesidades. Proporciona varias opciones para seleccionar la fecha o el rango de fechas.

BsDatepickerDirective

selector

  • [bsDatepicker]

Entradas

  • bsConfig - Parcial <BsDatepickerConfig>, objeto de configuración para datepicker

  • bsValue - Fecha, valor inicial de datepicker

  • container- cadena, selector que especifica el elemento al que se debe agregar el selector de fechas. predeterminado: cuerpo

  • dateCustomClasses - DatepickerDateCustomClasses [], clases personalizadas de fecha

  • datesDisabled - Fecha [], inhabilitar fechas específicas

  • datesEnabled - Fecha [], habilitar fechas específicas

  • dateTooltipTexts - DatepickerDateTooltipText [], texto de información sobre herramientas de fecha

  • daysDisabled - número [], deshabilitar ciertos días de la semana

  • isDisabled - booleano, indica si el contenido de datepicker está habilitado o no

  • isOpen - booleano, devuelve si el selector de fecha se muestra actualmente o no

  • maxDate - booleano, fecha máxima que está disponible para su selección

  • minDate - booleano, fecha mínima que está disponible para su selección

  • minMode - BsDatepickerViewMode, modo de vista mínimo: día, mes o año

  • outsideClick - booleano, cerrar selector de fecha al hacer clic exterior, predeterminado: verdadero

  • outsideEsc - booleano, cerrar selector de fecha al hacer clic en el escape, predeterminado: verdadero

  • placement- "arriba" | "abajo" | "izquierda" | "derecha", Colocación de un selector de fecha. Acepta: "arriba", "abajo", "izquierda", "derecha", predeterminado: abajo

  • triggers- cadena, especifica los eventos que deben activarse. Admite una lista de nombres de eventos separados por espacios, predeterminado: haga clic en

Salidas

  • bsValueChange - Emite cuando se ha cambiado el valor del selector de fechas

  • onHidden - Emite un evento cuando el selector de fecha está oculto

  • onShown - Emite un evento cuando se muestra el selector de fecha

Métodos

  • show()- Abre el selector de fecha de un elemento. Esto se considera una activación "manual" del selector de fechas.

  • hide()- Cierra el selector de fecha de un elemento. Esto se considera una activación "manual" del selector de fechas.

  • toggle()- Alterna el selector de fecha de un elemento. Esto se considera una activación "manual" del selector de fechas.

  • setConfig() - Establecer configuración para selector de fechas

BsDaterangepickerDirectiva

selector

  • [bsDaterangepicker]

Entradas

  • bsConfig - Parcial <BsDaterangepickerConfig>, objeto de configuración para daterangepicker

  • bsValue - Fecha, valor inicial de daterangepicker

  • container- cadena, un selector que especifica el elemento al que se debe agregar el selector de rango de fechas. predeterminado: cuerpo

  • dateCustomClasses - DatepickerDateCustomClasses [], clases personalizadas de fecha

  • datesDisabled - Fecha [], inhabilitar fechas específicas

  • datesEnabled - Fecha [], habilitar fechas específicas

  • dateTooltipTexts - DatepickerDateTooltipText [], texto de información sobre herramientas de fecha

  • daysDisabled - número [], deshabilitar ciertos días de la semana

  • isDisabled - booleano, indica si el contenido de daterangepicker está habilitado o no

  • isOpen - booleano, devuelve si el selector de rango de fechas se muestra actualmente

  • maxDate - booleano, fecha máxima que está disponible para su selección

  • minDate - booleano, fecha mínima que está disponible para su selección

  • minMode - BsDatepickerViewMode, modo de vista mínimo: día, mes o año

  • outsideClick - booleano, cerrar selector de rango de fechas al hacer clic en el exterior, predeterminado: verdadero

  • outsideEsc - booleano, Cerrar selector de rango de fechas al hacer clic en escape, predeterminado: verdadero

  • placement- "arriba" | "abajo" | "izquierda" | "derecha", Colocación de un selector de fecha. Acepta: "arriba", "abajo", "izquierda", "derecha", predeterminado: abajo

  • triggers- cadena, especifica los eventos que deben activarse. Admite una lista de nombres de eventos separados por espacios, predeterminado: haga clic en

Salidas

  • bsValueChange - Emite cuando se cambia el valor del selector de rango de fechas

  • onHidden - Emite un evento cuando el selector de rango de fechas está oculto

  • onShown - Emite un evento cuando se muestra el selector de fecha

Métodos

  • show()- Abre el selector de fecha de un elemento. Esto se considera una activación "manual" del selector de fechas.

  • hide()- Cierra el selector de fecha de un elemento. Esto se considera una activación "manual" del selector de fechas.

  • toggle()- Alterna el selector de fecha de un elemento. Esto se considera una activación "manual" del selector de fechas.

  • setConfig() - Establecer configuración para selector de fechas

Ejemplo

Como vamos a usar DatePicker y DateRangePicker, tenemos que actualizar app.module.ts usado en ngx-bootstrap Collapse capítulo para usarBsDatepickerModule y BsDatepickerConfig.

Actualice app.module.ts para usar BsDatepickerModule y 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 { }

Actualice index.html para usar 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>

Actualice test.component.html para usar los selectores de fechas.

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>

Actualice test.component.ts para las variables y métodos correspondientes.

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

Construir y servir

Ejecute el siguiente comando para iniciar el servidor angular.

ng serve

Una vez que el servidor está en funcionamiento. Abra http: // localhost: 4200 y verifique el siguiente resultado.