Ngx-Bootstrap - DatePicker

Thành phần DatePicker ngx-bootstrap có thể cấu hình cao và có thể tùy chỉnh theo nhu cầu của chúng tôi. Nó cung cấp các tùy chọn khác nhau để chọn ngày hoặc phạm vi ngày.

BsDatepickerDirective

bộ chọn

[bsDatepicker]

Đầu vào

bsConfig - Partial <BsDatepickerConfig>, đối tượng cấu hình cho datepicker
bsValue - Ngày, giá trị ban đầu của trình chọn ngày
container- string, Một bộ chọn chỉ định phần tử mà bộ chọn ngày nên được thêm vào. default: body
dateCustomClasses - DatepickerDateCustomClasses [], lớp tùy chỉnh ngày tháng
datesDisabled - Ngày [], Tắt các ngày cụ thể
datesEnabled - Ngày [], Bật các ngày cụ thể
dateTooltipTexts - DatepickerDateTooltipText [], văn bản chú giải ngày
daysDisabled - number [], Tắt các ngày nhất định trong tuần
isDisabled - boolean, Cho biết nội dung của người chọn ngày có được bật hay không
isOpen - boolean, Trả về bộ chọn ngày hiện đang được hiển thị hay không
maxDate - boolean, Ngày tối đa có sẵn để lựa chọn
minDate - boolean, Ngày tối thiểu có sẵn để lựa chọn
minMode - BsDatepickerViewMode, Chế độ xem tối thiểu: ngày, tháng hoặc năm
outsideClick - boolean, Đóng bộ chọn ngày khi nhấp chuột bên ngoài, mặc định: true
outsideEsc - boolean, Đóng bộ chọn ngày khi nhấp chuột thoát, mặc định: true
placement- "đầu" | "dưới cùng" | "trái" | "right", Vị trí của người chọn ngày. Chấp nhận: "top", "bottom", "left", "right", default: bottom
triggers- string, Chỉ định các sự kiện sẽ kích hoạt. Hỗ trợ danh sách tên sự kiện được phân tách bằng dấu cách., Default: click

Kết quả đầu ra

bsValueChange - Phát ra khi giá trị trình chọn ngày đã được thay đổi
onHidden - Phát ra một sự kiện khi trình chọn ngày bị ẩn
onShown - Phát ra một sự kiện khi trình chọn ngày được hiển thị

Phương pháp

show()- Mở bộ chọn ngày của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của trình chọn ngày.
hide()- Đóng bộ chọn ngày của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của trình chọn ngày.
toggle()- Chuyển đổi bộ chọn ngày của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của trình chọn ngày.
setConfig() - Đặt cấu hình cho datepicker

BsDaterangepickerDirective

bộ chọn

[bsDaterangepicker]

Đầu vào

bsConfig - Một phần <BsDaterangepickerConfig>, đối tượng cấu hình cho daterangepicker
bsValue - Ngày, giá trị ban đầu của daterangepicker
container- string, Một bộ chọn chỉ định phần tử mà bộ chọn ngày tháng nên được thêm vào. default: body
dateCustomClasses - DatepickerDateCustomClasses [], lớp tùy chỉnh ngày tháng
datesDisabled - Ngày [], Tắt các ngày cụ thể
datesEnabled - Ngày [], Bật các ngày cụ thể
dateTooltipTexts - DatepickerDateTooltipText [], văn bản chú giải ngày
daysDisabled - number [], Tắt các ngày nhất định trong tuần
isDisabled - boolean, Cho biết nội dung của daterangepicker có được bật hay không
isOpen - boolean, Trả về việc trình chọn ngày tháng có đang được hiển thị hay không
maxDate - boolean, Ngày tối đa có sẵn để lựa chọn
minDate - boolean, Ngày tối thiểu có sẵn để lựa chọn
minMode - BsDatepickerViewMode, Chế độ xem tối thiểu: ngày, tháng hoặc năm
outsideClick - boolean, Đóng daterangepicker khi nhấp chuột bên ngoài, mặc định: true
outsideEsc - boolean, Đóng daterangepicker khi nhấp chuột thoát, mặc định: true
placement- "đầu" | "dưới cùng" | "trái" | "right", Vị trí của một daterangepicker. Chấp nhận: "top", "bottom", "left", "right", default: bottom
triggers- string, Chỉ định các sự kiện sẽ kích hoạt. Hỗ trợ danh sách tên sự kiện được phân tách bằng dấu cách., Default: click

Kết quả đầu ra

bsValueChange - Phát ra khi giá trị daterangepicker đã được thay đổi
onHidden - Phát ra một sự kiện khi trình chọn ngày bị ẩn
onShown - Phát ra một sự kiện khi trình chọn ngày được hiển thị

Phương pháp

show()- Mở bộ chọn ngày của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của trình chọn ngày.
hide()- Đóng bộ chọn ngày của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của trình chọn ngày.
toggle()- Chuyển đổi bộ chọn ngày của một phần tử. Đây được coi là cách kích hoạt 'thủ công' của trình chọn ngày.
setConfig() - Đặt cấu hình cho datepicker

Thí dụ

Vì chúng ta sẽ sử dụng DatePicker và DateRangePicker, chúng ta phải cập nhật app.module.ts được sử dụng trong ngx-bootstrap Thu gọn chương để sử dụngBsDatepickerModule và BsDatepickerConfig.

Cập nhật app.module.ts để sử dụng BsDatepickerModule và 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 { }

Cập nhật index.html để sử dụng 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>

Cập nhật test.component.html để sử dụng công cụ chọn ngày.

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>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

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

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200 và xác minh kết quả sau.