Angular 8 ngx-formly 日期时间选择器答案

【问题标题】：angular 8 ngx-formly datetimepickerAngular 8 ngx-formly 日期时间选择器
【发布时间】：2021-03-05 05:52:52
【问题描述】：

我正在尝试通过ngx-formly 制作日期时间选择器

看完offical docs中的所有例子后，我还是不知道怎么做。

datetimepicker 中是否有任何自定义表单字段或构建？

【问题讨论】：

标签： angular ngx-formly

【解决方案1】：

自定义字段类型https://formly.dev/guide/custom-formly-field的文档，在这里总结一下所需的步骤：

创建一个名为 datetimepicker 的自定义 field type：

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-datetimepicker',
 template: `
   <datetimepicker [formControl]="formControl"></datetimepicker>
 `,
})
export class DatetimepickerFieldType extends FieldType {}

通过NgModule 声明定义您的字段类型：

@NgModule({
 declarations: [DatetimepickerFieldType],
 imports: [
   ....
   FormlyModule.forRoot({
     types: [
       { name: 'datetimepicker', component: DatetimepickerFieldType },
     ],
   }),
 ],
})
export class AppModule {}

在您的字段配置中将类型设置为type：

fields = [
  {
    key: 'datetimepicker',
    type: 'datetimepicker',
  },
]

还是一头雾水，检查formly UI源代码https://github.com/ngx-formly/ngx-formly/tree/master/src/ui

【讨论】：

【解决方案2】：

如果您不介意依赖浏览器的内置日期和时间选择器，您可以将常规 Formly 字段的 templateOptions.type 设置为 datetime-local（或 date 或 time，如果您只需要一个或另一个），这将传递给 html <input> 元素。无需自定义字段！虽然显然与制作自己的日期时间选择器相比，您对用户体验的控制更少。

Mozilla 有关于 datetime-local 类型以及日期和时间的使用、浏览器兼容性等详细信息。

【讨论】：