Ngx-Bootstrap - 日期選擇器

ngx-bootstrap DatePicker 元件高度可配置和可定製，以滿足我們的需求。它提供各種選項來選擇日期或日期範圍。

BsDatepickerDirective

選擇器

[bsDatepicker]

輸入

bsConfig − Partial<BsDatepickerConfig>，日期選擇器的配置物件
bsValue − Date，日期選擇器的初始值
container − string，指定應將日期選擇器附加到的元素的選擇器。預設值：body
dateCustomClasses − DatepickerDateCustomClasses[]，日期自定義類
datesDisabled − Date[]，停用特定日期
datesEnabled − Date[]，啟用特定日期
dateTooltipTexts − DatepickerDateTooltipText[]，日期工具提示文字
daysDisabled − number[]，停用一週中的某些天
isDisabled − boolean，指示日期選擇器的內容是否啟用
isOpen − boolean，返回日期選擇器當前是否正在顯示
maxDate − Date，可供選擇的最大日期
minDate − Date，可供選擇的最小日期
minMode − BsDatepickerViewMode，最小檢視模式：日、月或年
outsideClick − boolean，單擊外部時關閉日期選擇器，預設值：true
outsideEsc − boolean，單擊 Esc 鍵時關閉日期選擇器，預設值：true
placement − "top" | "bottom" | "left" | "right"，日期選擇器的放置位置。接受：“top”、“bottom”、“left”、“right”，預設值：bottom
triggers − string，指定應觸發的事件。支援用空格分隔的事件名稱列表，預設值：click

輸出

bsValueChange − 當日期選擇器的值發生更改時發出
onHidden − 日期選擇器隱藏時發出事件
onShown − 日期選擇器顯示時發出事件

方法

show() − 開啟元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
hide() − 關閉元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
toggle() − 切換元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
setConfig() − 設定日期選擇器的配置

BsDaterangepickerDirective

選擇器

[bsDaterangepicker]

輸入

bsConfig − Partial<BsDaterangepickerConfig>，日期範圍選擇器的配置物件
bsValue − Date，日期範圍選擇器的初始值
container − string，指定應將日期範圍選擇器附加到的元素的選擇器。預設值：body
dateCustomClasses − DatepickerDateCustomClasses[]，日期自定義類
datesDisabled − Date[]，停用特定日期
datesEnabled − Date[]，啟用特定日期
dateTooltipTexts − DatepickerDateTooltipText[]，日期工具提示文字
daysDisabled − number[]，停用一週中的某些天
isDisabled − boolean，指示日期範圍選擇器的內容是否啟用
isOpen − boolean，返回日期範圍選擇器當前是否正在顯示
maxDate − Date，可供選擇的最大日期
minDate − Date，可供選擇的最小日期
minMode − BsDatepickerViewMode，最小檢視模式：日、月或年
outsideClick − boolean，單擊外部時關閉日期範圍選擇器，預設值：true
outsideEsc − boolean，單擊 Esc 鍵時關閉日期範圍選擇器，預設值：true
placement − "top" | "bottom" | "left" | "right"，日期範圍選擇器的放置位置。接受：“top”、“bottom”、“left”、“right”，預設值：bottom
triggers − string，指定應觸發的事件。支援用空格分隔的事件名稱列表，預設值：click

輸出

bsValueChange − 當日期範圍選擇器的值發生更改時發出
onHidden − 日期範圍選擇器隱藏時發出事件
onShown − 日期範圍選擇器顯示時發出事件

方法

show() − 開啟元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
hide() − 關閉元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
toggle() − 切換元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
setConfig() − 設定日期選擇器的配置

示例

由於我們將使用 DatePicker 和 DateRangePicker，因此我們必須更新 ngx-bootstrap 摺疊章節中使用的 app.module.ts 以使用 BsDatepickerModule 和 BsDatepickerConfig。

更新 app.module.ts 以使用 BsDatepickerModule 和 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 { }

更新 index.html 以使用 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>

更新 test.component.html 以使用日期選擇器。

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>

更新 test.component.ts 以對應變數和方法。

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

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

列印頁面