怎么自定义angular-datetime-picker格式？下面本篇文章聊聊自定义格式的方法，希望对大家有所帮助！
最近一直都在使用 Angular 进行开发，维护项目。遇到了日期的问题，同事采用的是 @danielmoncada/angular-datetime-picker。
PS：当然，如果是新项目，还是建议使用框架集成的日期功能，虽然功能可能不是你的预期，但是起码够用。比如 ant design 的 angular 版本。
当然，angular-datetime-picker 提供了很多属性和事件。【相关教程推荐：《angularjs视频教程》】
比如：
owl-date-time 的属性有：
pickerTypeboth, calendar, timer可选bothyearOnly布尔值可选false
其他的属性和方法请前往官网查看
当然，本文我们并不是探讨这些简单更改属性和方法的需求。我们来讨论两点：
在输入框中显示 YYYY/MM/ HH:mm:ss 格式
翻译 – 更改按钮的名称 Cancel => 取消，Set => 设置
目前默认的值是这样的：
我们有相关的 html 代码如下：
设置时间格式
在 app.module.ts 中引入：
法语写作助手
法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。
31 查看详情
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格式的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/545562.html
微信扫一扫 
支付宝扫一扫 
