Ngx-ブートストラップ-DatePicker

ngx-bootstrap DatePickerコンポーネントは、必要に応じて高度に構成およびカスタマイズできます。日付または日付範囲を選択するためのさまざまなオプションが用意されています。

BsDatepickerDirective

セレクタ

[bsDatepicker]

入力

bsConfig − Partial <BsDatepickerConfig>、datepickerの構成オブジェクト
bsValue −日付、datepickerの初期値
container−文字列、日付ピッカーを追加する要素を指定するセレクター。デフォルト：本体
dateCustomClasses − DatepickerDateCustomClasses []、日付カスタムクラス
datesDisabled − date []、特定の日付を無効にする
datesEnabled − date []、特定の日付を有効にする
dateTooltipTexts − datepickerDateTooltipText []、日付ツールチップテキスト
daysDisabled − number []、特定の曜日を無効にする
isDisabled − boolean、datepickerのコンテンツが有効かどうかを示します
isOpen − boolean、日付ピッカーが現在表示されているかどうかを返します
maxDate −ブール値、選択可能な最大日付
minDate −ブール値、選択可能な最小日付
minMode − bsDatepickerViewMode、最小表示モード：日、月、または年
outsideClick −ブール値、外側のクリックで日付ピッカーを閉じる、デフォルト：true
outsideEsc −ブール値、エスケープクリック時に日付ピッカーを閉じる、デフォルト：true
placement−「トップ」| 「下」| 「左」| 「右」、日付ピッカーの配置。受け入れ：「上」、「下」、「左」、「右」、デフォルト：下
triggers−文字列、トリガーするイベントを指定します。イベント名のスペース区切りリストをサポートします。デフォルト：クリック

出力

bsValueChange −日付ピッカー値が変更されたときに発生します
onHidden −日付ピッカーが非表示の場合にイベントを発行します
onShown −日付ピッカーが表示されたときにイベントを発行します

メソッド

show()−要素の日付ピッカーを開きます。これは、日付ピッカーの「手動」トリガーと見なされます。
hide()−要素の日付ピッカーを閉じます。これは、日付ピッカーの「手動」トリガーと見なされます。
toggle()−要素の日付ピッカーを切り替えます。これは、日付ピッカーの「手動」トリガーと見なされます。
setConfig() −datepickerの構成を設定します

BsDaterangepickerDirective

セレクタ

[bsDaterangepicker]

入力

bsConfig − Partial <BsDaterangepickerConfig>、daterangepickerの構成オブジェクト
bsValue −日付、daterangepickerの初期値
container−文字列、daterangepickerを追加する要素を指定するセレクター。デフォルト：本体
dateCustomClasses − DatepickerDateCustomClasses []、日付カスタムクラス
datesDisabled − date []、特定の日付を無効にする
datesEnabled − date []、特定の日付を有効にする
dateTooltipTexts − datepickerDateTooltipText []、日付ツールチップテキスト
daysDisabled − number []、特定の曜日を無効にする
isDisabled − boolean、daterangepickerのコンテンツが有効かどうかを示します
isOpen − boolean、daterangepickerが現在表示されているかどうかを返します
maxDate −ブール値、選択可能な最大日付
minDate −ブール値、選択可能な最小日付
minMode − bsDatepickerViewMode、最小表示モード：日、月、または年
outsideClick −ブール値、外側のクリックでdaterangepickerを閉じる、デフォルト：true
outsideEsc −ブール値、エスケープクリック時にdaterangepickerを閉じる、デフォルト：true
placement−「トップ」| 「下」| 「左」| 「右」、daterangepickerの配置。受け入れ：「上」、「下」、「左」、「右」、デフォルト：下
triggers−文字列、トリガーするイベントを指定します。イベント名のスペース区切りリストをサポートします。デフォルト：クリック

出力

bsValueChange −daterangepicker値が変更されたときに発生します
onHidden −daterangepickerが非表示になっているときにイベントを発行します
onShown −daterangepickerが表示されたときにイベントを発行します

メソッド

show()−要素の日付ピッカーを開きます。これは、日付ピッカーの「手動」トリガーと見なされます。
hide()−要素の日付ピッカーを閉じます。これは、日付ピッカーの「手動」トリガーと見なされます。
toggle()−要素の日付ピッカーを切り替えます。これは、日付ピッカーの「手動」トリガーと見なされます。
setConfig() −datepickerの構成を設定します

例

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

bs-datepicker.cssを使用するようにindex.htmlを更新します。

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

サーバーが起動して実行されたら。http：// localhost：4200を開き、次の出力を確認します。