使用Angular Material的日期选择器，是日期输入的救星吗？

2 年 ago
科, 雅
2 minutes

首先

这篇文章是Angular Advent Calendar 2018第15天的文章。

我认为在Web应用程序中常用的输入UI中会有”日期输入”，但由于不同的浏览器支持度不同，它经常无法正常使用。为了解决这个问题，我认为出现了各种用于日期输入的库。

突发奇想的程度上，我以为会有很丰富的jQuery系列之类的工具，
但在工作中我们正在使用Angular + AngularJS的混合环境来开发项目，
所以在判断是否要将jQuery添加到这里时，我们觉得有点微妙。
因此，本文是关于研究Angular Material的日期选择器并进行尝试的记录。

看看不同浏览器之间的日期输入差异

在开始使用Angular Material之前，我想整理一下每种浏览器中``的外观和使用体验的差异。

我使用MDN文档中的示例进行了尝试，感觉只要在支持的浏览器上可以做到最低限的事情，就没有必要添加Material。这样还可以减小捆绑包的大小。

macOS（操作系统软件）

mac firefox.png

尽管macOS自带的Safari没有提供从日历中选择的用户界面，有点失望。顺便说一下，iOS的Safari提供了滚轮式的用户界面，所以没问题。Chrome和Firefox提供了从日历中选择的用户界面，看起来不错。我个人比较喜欢Firefox的用户界面，觉得简洁清爽，给人留下了好印象。

Windows 10 is a computer operating system.

windows edge.png

IE11没有像Safari一样提供日历界面，让人感到遗憾。
Chrome和macOS一样也有日历界面，Edge也提供类似iOS Safari的界面。
我忘记截Firefox的屏幕截图了，但是在macOS上应该也没有问题。

支持IE11和Safari的网站需要进行兼容性配合。

由于macOS的Safari和Windows的IE11不能提供的日历式用户界面，因此需要采取某种适配措施。

在指定某个开始日期的界面上，对用户说”请以yyyy-MM-dd的形式输入”太不友好了，所以提供一个日历型的用户界面可能更好。因此，从下一个部分开始，我们将使用Angular Material的日期选择器进行操作。

开发环境

我在工作中使用的是Angular + Angular JS的混合环境（正在积极迁移中），但是这次我想验证一下能否快速完成我想做的事情，所以我将尝试创建一个新的CLI项目。（可能是错觉吧，使用StackBlitz无法在各种不同的浏览器中查看。）

Angular CLI版本为7.1.1，Node版本为8.11.3，操作系统为macOS 10.14.2。

创建AngularCLI项目。

首先，使用CLI生成一个空的Angular项目。

用中文对以下命令进行释义：
ng new angular-material-test –routing –style=styl

使用Angular命令行工具（ng），创建一个名为angular-material-test的新项目，并包含路由（–routing）和使用stylus作为样式（–style=styl）。

只是试试而已，不需要什么路由之类的，只是习惯而已。

引入Angular Material

由于这是一个CLI项目，只需要输入ng add @angular/material，基本上就完成了。
在中间会让您选择Material Design的颜色调色板，可以选择默认的，也可以设置自定义的。
以前尝试引入Material时需要更多步骤，现在变得非常简单。ng add太棒了。

出于某种原因，我想要以原创方式设置一个色彩主题，所以只对此进行了一些调整。
在参考了http://takasdev.hatenablog.com/entry/2017/10/08/125524 的情况下，
我使用http://mcg.mbitson.com/#!?mcgpalette0=%23489bc6&themename=mcgtheme 来创建并整合了颜色。

实现日期选择器

由于我不想直接将材料设计应用于输入本身，所以我选择了用按钮来打开日历的实现方式。我使用CSS将按钮设置为透明，并叠加在.date-input上。

// ...
import { FormsModule } from '@angular/forms';
import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule. // 追加
    MatDatepickerModule, // 追加
    MatNativeDateModule  // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div class="date-input-container">
  <input class="date-input" [matDatepicker]="picker" [(ngModel)]="date" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
  <div class="button" (click)="picker.open()"></div>
</div>

只用这个，我已经可以使用Angular Material的日期选择器了。
在任何浏览器上都可以以相同的界面选择日期，给人一种统一的感觉。
[(ngModel)]能够以Date类型返回，这也是一个令人高兴的点。不需要每次都进行解析等操作，这也很方便！

汉化

image.png

所以，我迅速地在 app.module.ts 中参考了文档，并添加了以下的描述。

providers: [
  {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'}
]
スクリーンショット 2018-12-13 23.56.25.png

因为「◯日」的表示有点凌乱，所以我想回到英语的形式，改为「1、2、3、4」的表示方式。

// NativeDateAdapterの一部を上書きしたJPDateAdapterを作る
export class JPDateAdapter extends NativeDateAdapter {
  getDateNames(): string[] {
    return Array.from(Array(31), (v, k) => `${k + 1}`);
  }
}

providers: [
   {provide: DateAdapter, useClass: JPDateAdapter}
]
image.png

变得不错啦！

定制日期输入

限制可输入的日期

使用Angular Material，您可以指定日期范围，让用户输入日期。

minDate: Date;
maxDate: Date;

ngOnInit () {
  // 今日の日付から…
  this.minDate = new Date();

  // 一週間後の日付を指定したい
  const date = new Date();
  date.setDate(this.minDate.getDate() + 7);
  this.maxDate = date;
}

<input
  class="date-input"
  [min]="minDate"
  [max]="maxDate"
  [(ngModel)]="date"
  [matDatepicker]="picker"
  placeholder="Choose a date">

当打开日历时，首先显示的日期。

当您首次打开日历时，不一定会显示今天的日期，还可以快速选择特定日期的情况。

 <mat-datepicker [startAt]="startAt" #picker></mat-datepicker>

startAt = new Date(1996, 2, 10)

打开日历时首先显示的用户界面

既然让选择生日，我想首先是让选择年份的那种情况，非常合适。

<!-- 'month'(月表示) | 'year'(年表示) | 'multi-year'(複数年表示) -->
 <mat-datepicker [startView]="'multi-year'" #picker></mat-datepicker>

总结起来

    • 日付入力の闇をまるっと吸収してくれるAngular Material最高かよ

 

    • Angular Material、サンプルが充実してて最高だった

 

    APIドキュメントを見ているだけでも面白い ?️

明天的 Angular Advent Calendar 2018 将由 @shira_ 先生负责！

✖
广告
将在 10 秒后关闭
bannerAds