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ụngBsDatepickerModuleBsDatepickerConfig.

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.