迹忆客 专注技术分享

日期选择器组件是在我们填写个人信息表格的情况下使用的组件之一。

它是在我们想在页面上选择我们的出生日期或者我们想填写我们开始工作和结束工作的日期的情况下使用的组件。

我们会遇到各种情况，在网页上看到 DateTime picker 组件。现在让我们学习如何使用angular material dependency来实现它。

使用Angular Material依赖的DateTime Picker

angular material UI是一个可用于即用组件的库，我们将在创建 DateTime picker时使用它。

在创建一个新的 angular 项目后，浏览项目文件夹，用 ng add @angular/material 安装 material。现在进入编码部分，我们导航到src>>app，找到 app.component.html 文件并输入这些代码：

app.component.html 的代码片段：

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

在这里，我们正在创建DateTime picker组件的基本结构和行为。

我们必须在 app.module.ts 文件中导入 angular material 的一些依赖项。这将使我们的DateTime picker组件发挥作用。

app.module.ts 的代码片段

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我们在这里所做的是把必要的依赖关系导入 app.module.ts。由于我们不会在 app.component.ts 文件中做任何改动，我们将保持它的原样。

这样，我们将得到以下输出：

创建DateTime Picker组件的其他方法

为了多样化、探索和学习，我们将访问其他可以用来设计DateTime Picker组件的方法。

使用 ng-bootstrap 库的DateTime Picker组件

像 angular 库一样，ng-bootstrap是一个流行的库，它为angular框架提供小工具和依赖。实现DateTime picker组件也同样简单。

在我们新创建的 angular 应用程序的项目文件夹内，我们将通过输入：ng add @ng-bootstrap/ng-bootstrap 来安装 ng-bootstrap。

然后我们开始构思组件的结构和行为；我们进入 app.component.html 文件，用代码来创建这个组件。

app.component.html 的代码片段：

<p>Simple datepicker</p>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>

通过这段代码，我们会注意到所选的日期会显示在组件下面；这种行为是通过最后两行代码创建的。

我们现在需要关注DateTime picker组件的功能。要做到这一点，我们将浏览app.component.ts文件并输入这些代码。

app.component.ts 的代码片段：

import {Component} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'timetwo';
  model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar) {
  }
  selectToday() {
    this.model = this.calendar.getToday();
  }
}

我们用这段代码做的是试图定义DateTime picker组件的行为，这样当我们选择日期时，selectToday() 函数会激活 app.component.html 中的Model，从而打印出我们选择的日期。

最后一部分是管理我们从 ng-bootstrap 安装的依赖关系。在app.module.ts文件中，我们将创建这些代码。

app.module.ts 的代码片段

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

写完本节的所有代码后，我们将得到以下输出：

DateTime Picker Using ng2 NPM

使用ng2 NPM的日期选择器

我们要研究的最后一个方法是 ng2 库，它为我们提供了一个高度可配置的 angular 框架的日期选择器组件。

在我们的新项目文件夹中，我们通过输入：npm i ng2-date-picker 来安装 ng2 库。安装完成后，我们在 app.component.html 文件中输入代码，设计网页的结构和行为。

app.component.html 的代码片段：

<dp-date-picker theme="dp-material"
[config]="datePickerConfig" required="true">
</dp-date-picker>
<br />
<input type="button" (click)="updateFormat()"  value="update date picker format" />
<br />
format : {{datePickerConfig.format}}

现在我们进入 app.component.ts 文件，做一些更多的编码，为我们的 DateTime picker 组件带来功能。

app.component.ts 的代码片段：

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from "@angular/forms";
import moment from 'moment'
import { IDayCalendarConfig, DatePickerComponent } from "ng2-date-picker";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'timethree';
  datePickerConfig = {
    format: 'DD'
  };
  updateFormat() {
    console.log('update')
    this.datePickerConfig = {
      ...this.datePickerConfig,
      format: 'DD-MM-YYYY'
    }
  }
}

首先，我们在 app.component.ts 文件中导入一些ng2模块；我们将在 app.module.ts 文件中导入其余的模块。

然后我们使用 updateFormat() 函数来显示我们在DateTime picker组件下选择的日期。

接下来是处理 app.module.ts 文件，在这里我们从 ng2 库中导入我们需要的其他模块。

app.module.ts 的代码片段：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DpDatePickerModule } from "ng2-date-picker";
@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, DpDatePickerModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

最后，为了让应用程序工作，我们需要添加这个配置： "allowSyntheticDefaultImports": true 在我们项目文件夹的 tsconfig.json 文件中。

在成功完成该部分的所有步骤后，我们将看到以下输出：