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.