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

Question

我正在尝试通过ngx-formly制作 datetimepicker

在我阅读了官方文档中的所有示例之后，我仍然不知道如何制作它。

是否有任何自定义表单字段或内置日期时间选择器？

Answer 1

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

1. 使用 name创建自定义字段类型datetimepicker：

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

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

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

3. type在您的字段配置中设置类型：

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

仍然困惑检查正式的 UI 源代码https://github.com/ngx-formly/ngx-formly/tree/master/src/ui

Answer 2

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

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