Ngx-Bootstrap - DatePicker

ngx-bootstrap DatePicker bileşeni, ihtiyacımıza göre oldukça yapılandırılabilir ve özelleştirilebilir. Tarih veya tarih aralığı seçmek için çeşitli seçenekler sunar.

BsDatepickerDirective

seçici

[bsDatepicker]

Girişler

bsConfig - Kısmi <BsDatepickerConfig>, tarih seçici için Config nesnesi
bsValue - Tarih seçicinin ilk değeri
container- dize, Tarih seçicinin eklenmesi gereken öğeyi belirten bir seçici. varsayılan: gövde
dateCustomClasses - DatepickerDateCustomClasses [], Date özel sınıfları
datesDisabled - Tarih [], Belirli tarihleri devre dışı bırakın
datesEnabled - Tarih [], Belirli tarihleri etkinleştir
dateTooltipTexts - DatepickerDateTooltipText [], Tarih araç ipucu metni
daysDisabled - sayı [], Haftanın Belirli günlerini Devre Dışı Bırak
isDisabled - boolean, tarih seçici içeriğinin etkin olup olmadığını gösterir
isOpen - boolean, Tarih seçicinin o anda gösterilip gösterilmediğini döndürür
maxDate - boole, Seçilebilecek maksimum tarih
minDate - boole, Seçilebilecek Minimum tarih
minMode - BsDatepickerViewMode, Minimum görüntüleme modu: gün, ay veya yıl
outsideClick - boole, Dış tıklamada tarih seçiciyi kapat, varsayılan: true
outsideEsc - boole, Çıkış tıklamasında tarih seçiciyi kapat, varsayılan: true
placement- "üst" | "alt" | "sol" | "sağ", Tarih seçicinin yerleştirilmesi. Kabul eder: "üst", "alt", "sol", "sağ", varsayılan: alt
triggers- string, Tetiklemesi gereken olayları belirtir. Olay adlarının boşlukla ayrılmış listesini destekler., Varsayılan: tıklayın

çıktılar

bsValueChange - Tarih seçici değeri değiştirildiğinde yayınlar
onHidden - Tarih seçici gizlendiğinde bir olay yayar
onShown - Tarih seçici gösterildiğinde bir olay yayar

Yöntemler

show()- Bir öğenin tarih seçicisini açar. Bu, tarih seçicinin 'manuel' olarak tetiklenmesi olarak kabul edilir.
hide()- Bir öğenin tarih seçicisini kapatır. Bu, tarih seçicinin 'manuel' olarak tetiklenmesi olarak kabul edilir.
toggle()- Bir öğenin tarih seçicisini açar / kapatır. Bu, tarih seçicinin 'manuel' olarak tetiklenmesi olarak kabul edilir.
setConfig() - Tarih seçici için yapılandırma ayarla

BsDaterangepickerDirective

seçici

[bsDaterangepicker]

Girişler

bsConfig - Kısmi <BsDaterangepickerConfig>, daterangepicker için Config nesnesi
bsValue - Tarih, daterangepicker'ın ilk değeri
container- dize, Tarih seçicinin eklenmesi gereken öğeyi belirten bir seçici. varsayılan: gövde
dateCustomClasses - DatepickerDateCustomClasses [], Date özel sınıfları
datesDisabled - Tarih [], Belirli tarihleri devre dışı bırakın
datesEnabled - Tarih [], Belirli tarihleri etkinleştir
dateTooltipTexts - DatepickerDateTooltipText [], Tarih araç ipucu metni
daysDisabled - sayı [], Haftanın Belirli günlerini Devre Dışı Bırak
isDisabled - boolean, daterangepicker içeriğinin etkin olup olmadığını gösterir
isOpen - boole, Tarih seçicinin o anda gösterilip gösterilmediğini döndürür
maxDate - boole, Seçilebilecek maksimum tarih
minDate - boole, Seçilebilecek Minimum tarih
minMode - BsDatepickerViewMode, Minimum görüntüleme modu: gün, ay veya yıl
outsideClick - boole, Dış tıklamada daterangepicker'ı kapat, varsayılan: true
outsideEsc - boole, kaçış tıklamasında daterangepicker'ı kapat, varsayılan: true
placement- "üst" | "alt" | "sol" | "sağ", Bir tarih seçicinin yerleştirilmesi. Kabul eder: "üst", "alt", "sol", "sağ", varsayılan: alt
triggers- string, Tetiklemesi gereken olayları belirtir. Olay adlarının boşlukla ayrılmış listesini destekler., Varsayılan: tıklayın

çıktılar

bsValueChange - Daterangepicker değeri değiştirildiğinde yayınlar
onHidden - Tarih seçici gizlendiğinde bir olay yayar
onShown - Tarih seçici gösterildiğinde bir olay yayar

Yöntemler

show()- Bir öğenin tarih seçicisini açar. Bu, tarih seçicinin 'manuel' olarak tetiklenmesi olarak kabul edilir.
hide()- Bir öğenin tarih seçicisini kapatır. Bu, tarih seçicinin 'manuel' olarak tetiklenmesi olarak kabul edilir.
toggle()- Bir öğenin tarih seçicisini açar / kapatır. Bu, tarih seçicinin 'manuel' olarak tetiklenmesi olarak kabul edilir.
setConfig() - Tarih seçici için yapılandırma ayarla

Misal

DatePicker ve DateRangePicker'ı kullanacağımız için, ngx-bootstrap Collapse bölümünde kullanılan app.module.ts'i kullanmak için güncellemeliyizBsDatepickerModule ve BsDatepickerConfig.

BsDatepickerModule ve BsDatepickerConfig'i kullanmak için app.module.ts dosyasını güncelleyin.

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'yi kullanmak için index.html'yi güncelleyin.

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>

Tarih seçicileri kullanmak için test.component.html'yi güncelleyin.

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>

İlgili değişkenler ve yöntemler için test.component.ts dosyasını güncelleyin.

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

Oluşturun ve Sunun

Açısal sunucuyu başlatmak için aşağıdaki komutu çalıştırın.

ng serve

Sunucu çalışmaya başladığında. Http: // localhost: 4200'ü açın ve aşağıdaki çıktıyı doğrulayın.