怎么自定义angular-datetime-picker格式？下面本篇文章聊聊自定义格式的方法，希望对大家有所帮助！
最近一直都在使用 angular 进行开发，维护项目。遇到了日期的问题，同事采用的是 @danielmoncada/angular-datetime-picker。
ps：当然，如果是新项目，还是建议使用框架集成的日期功能，虽然功能可能不是你的预期，但是起码够用。比如 ant design 的 angular 版本。
当然，angular-datetime-picker 提供了很多属性和事件。【相关教程推荐：《angularjs视频教程》】
比如：
owl-date-time 的属性有：
属性名称类型是否必要默认值
pickertype both, calendar, timer 可选 both
yearonly 布尔值 可选 false
其他的属性和方法请前往官网查看
当然，本文我们并不是探讨这些简单更改属性和方法的需求。我们来讨论两点：
在输入框中显示 yyyy/mm/ hh:mm:ss 格式
翻译 - 更改按钮的名称 cancel => 取消，set => 设置
目前默认的值是这样的：
我们有相关的 html 代码如下：
<ng-container>  <input element-id="date-time-picker" class="form-control" (ngmodelchange)="gotodate($event)" [min]="mindate" [max]="maxdate" [owldatetimetrigger]="dt" [(ngmodel)]="selectedmoment" [owldatetime]="dt">  <owl-date-time #dt [showsecondstimer]="true"></owl-date-time></ng-container>
设置时间格式在 app.module.ts 中引入：
import {owldatetimemodule, owlmomentdatetimemodule, owl_date_time_formats} from '@danielmoncada/angular-datetime-picker';// https://danielykpan.github.io/date-time-picker/#locale-formats// 自定义格式化时间export const my_moment_formats = {    fullpickerinput: 'yyyy/mm/dd hh:mm:ss', // 指定的时间格式    datepickerinput: 'yyyy/mm/dd',    timepickerinput: 'hh:mm:ss',    monthyearlabel: 'yyyy/mm',    datea11ylabel: 'yyyy/mm/dd',    monthyeara11ylabel: 'yyyy/mm',};@ngmodule({  imports: [    owldatetimemodule,    owlmomentdatetimemodule  ],  providers: [    {provide: owl_date_time_formats, usevalue: my_moment_formats  ],})export class appmodule {}
得到的结果图如下：
翻译按钮我们需要用到这个包的国际化，将对应的 cancel 翻译成 取消，set 翻译成 设置。
官网已经介绍：
import { ngmodule } from '@angular/core'; import { owldatetimemodule, owlnativedatetimemodule, owldatetimeintl} from 'ng-pick-datetime'; // here is the default text string export class defaultintl extends owldatetimeintl = {   /** a label for the up second button (used by screen readers). */  upsecondlabel= 'add a second',   /** a label for the down second button (used by screen readers). */  downsecondlabel= 'minus a second',   /** a label for the up minute button (used by screen readers). */   upminutelabel= 'add a minute',   /** a label for the down minute button (used by screen readers). */   downminutelabel= 'minus a minute',  /** a label for the up hour button (used by screen readers). */   uphourlabel= 'add a hour',   /** a label for the down hour button (used by screen readers). */  downhourlabel= 'minus a hour',   /** a label for the previous month button (used by screen readers). */  prevmonthlabel= 'previous month',   /** a label for the next month button (used by screen readers). */  nextmonthlabel= 'next month',   /** a label for the previous year button (used by screen readers). */  prevyearlabel= 'previous year',   /** a label for the next year button (used by screen readers). */  nextyearlabel= 'next year',   /** a label for the previous multi-year button (used by screen readers). */  prevmultiyearlabel= 'previous 21 years',   /** a label for the next multi-year button (used by screen readers). */  nextmultiyearlabel= 'next 21 years',   /** a label for the 'switch to month view' button (used by screen readers). */  switchtomonthviewlabel= 'change to month view',   /** a label for the 'switch to year view' button (used by screen readers). */  switchtomultiyearviewlabel= 'choose month and year',   /** a label for the cancel button */   cancelbtnlabel= 'cancel',   /** a label for the set button */   setbtnlabel= 'set',   /** a label for the range 'from' in picker info */   rangefromlabel= 'from',   /** a label for the range 'to' in picker info */   rangetolabel= 'to',   /** a label for the hour12 button (am) */   hour12amlabel= 'am',   /** a label for the hour12 button (pm) */   hour12pmlabel= 'pm', }; @ngmodule({   imports: [   owldatetimemodule,    owlnativedatetimemodule ],  providers: [    {provide: owldatetimeintl, useclass: defaultintl},  ], }) export class appexamplemodule { }
我们按照上面的思路整合下来实现我们的需求：
新建翻译文件 owl-date-time-translator.ts
import { injectable } from '@angular/core';import { defaulttranslationservice } from '@services/translation.service';import { owldatetimeintl } from '@danielmoncada/angular-datetime-picker';@injectable()export class owldatetimetranslator extends owldatetimeintl {  constructor(protected translationservice: defaulttranslationservice) {    super();    /** 取消按钮 */    this.cancelbtnlabel = this.translationservice.translate('action.cancel');    /** 设置按钮 */    this.setbtnlabel = this.translationservice.translate('action.set');  }};
这里我们引入了翻译服务 translationservice，可以根据不同地区进行语言选择。
然后我们在 app.module.ts 上操作：
import { owldatetimeintl } from '@danielmoncada/angular-datetime-picker';// 翻译 @danielmoncada/angular-datetime-pickerimport { owldatetimetranslator } from './path/to/owl-date-time-translator';@ngmodule({  providers: [    {provide: owldatetimeintl, useclass: owldatetimetranslator},  ],})export class appmodule {}
得到的效果图如下：
更多编程相关知识，请访问：编程视频！！
以上就是聊聊自定义angular-datetime-picker格式的方法的详细内容。