Ngx-Bootstrap - DatePicker

ngx-bootstrap DatePicker 组件是高度可配置的，并且可以根据我们的需要进行定制。它提供了各种选项来选择日期或日期范围。

BsDatepicker指令

选择器

  • [bs日期选择器]

输入

  • bsConfig - Partial<BsDatepickerConfig>，日期选择器的配置对象

  • bsValue - 日期，日期选择器的初始值

  • 容器- 字符串，指定日期选择器应附加到的元素的选择器。默认：正文

  • dateCustomClasses - DatepickerDateCustomClasses[]，日期自定义类

  • dateDisabled - 日期[]，禁用特定日期

  • dateEnabled - Date[]，启用特定日期

  • dateTooltipTexts - DatepickerDateTooltipText[]，日期工具提示文本

  • daysDisabled - number[]，禁用一周中的某些天

  • isDisabled - 布尔值，指示日期选择器的内容是否启用

  • isOpen - 布尔值，返回当前是否显示日期选择器

  • maxDate - 布尔值，可供选择的最大日期

  • minDate - 布尔值，可供选择的最小日期

  • minMode - BsDatepickerViewMode，最小视图模式：日、月或年

  • externalClick - 布尔值，在外部点击时关闭日期选择器，默认值：true

  • externalEsc - 布尔值，在转义单击时关闭日期选择器，默认值：true

  • 位置- “顶部”| “底部”| “左”| “正确”，日期选择器的位置。接受：“顶部”、“底部”、“左”、“右”，默认：底部

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。默认：单击

输出

  • bsValueChange - 当日期选择器值更改时发出

  • onHidden - 当日期选择器隐藏时发出事件

  • onShown - 显示日期选择器时发出事件

方法

  • show() - 打开元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • hide() - 关闭元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • toggle() - 切换元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • setConfig() - 设置日期选择器的配置

BsDaterangepicker指令

选择器

  • [bs日期范围选择器]

输入

  • bsConfig - Partial<BsDaterangepickerConfig>，daterangepicker 的配置对象

  • bsValue - 日期，日期范围选择器的初始值

  • 容器- 字符串，指定日期范围选择器应附加到的元素的选择器。默认：正文

  • dateCustomClasses - DatepickerDateCustomClasses[]，日期自定义类

  • dateDisabled - 日期[]，禁用特定日期

  • dateEnabled - Date[]，启用特定日期

  • dateTooltipTexts - DatepickerDateTooltipText[]，日期工具提示文本

  • daysDisabled - number[]，禁用一周中的某些天

  • isDisabled - 布尔值，指示日期范围选择器的内容是否启用

  • isOpen - 布尔值，返回当前是否显示日期范围选择器

  • maxDate - 布尔值，可供选择的最大日期

  • minDate - 布尔值，可供选择的最小日期

  • minMode - BsDatepickerViewMode，最小视图模式：日、月或年

  • externalClick - 布尔值，在外部点击时关闭日期范围选择器，默认值：true

  • externalEsc - 布尔值，在转义单击时关闭日期范围选择器，默认值：true

  • 位置- “顶部”| “底部”| “左”| “右”，日期范围选择器的位置。接受：“顶部”、“底部”、“左”、“右”，默认：底部

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。默认：单击

输出

  • bsValueChange - 当 daterangepicker 值更改时发出

  • onHidden - 当日期范围选择器隐藏时发出事件

  • onShown - 显示日期范围选择器时发出事件

方法

  • show() - 打开元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • hide() - 关闭元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • toggle() - 切换元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • setConfig() - 设置日期选择器的配置

例子

由于我们将使用 DatePicker 和 DateRangePicker ，因此我们必须更新ngx-bootstrap Collapse章节中使用的 app.module.ts 以使用BsDatepickerModule和BsDatepickerConfig。

更新 app.module.ts 以使用 BsDatepickerModule 和 BsDatepickerConfig。

应用程序模块.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 { }

更新index.html以使用bs-datepicker.css。

应用程序模块.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>

更新 test.component.html 以使用日期选择器。

测试.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>

更新 test.component.ts 中相应的变量和方法。

测试组件.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 {
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

日期选择器