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を開き、次の出力を確認します。