angular 8 ngx-formly datetimepicker

Question

我正在尝试通过 ngx-formly

制作日期时间选择器

看了offical docs里所有的例子，还是不知道怎么做。

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

Answer 1

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

1. 创建自定义 field type 名称 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 类型的用法、浏览器兼容性等，以及日期和时间。