ホームページ > 記事 > ウェブフロントエンド > angular-datetime-picker 形式をカスタマイズする方法について話しましょう
angular-datetime-picker 形式をカスタマイズするにはどうすればよいですか?次の記事ではフォーマットのカスタマイズ方法について説明していますので、皆様のお役に立てれば幸いです。
私は最近、プロジェクトの開発と保守に Angular
を使用しています。日付の問題が発生し、同僚は @danielmoncada/angular-datetime-picker を使用しました。
PS: もちろん、新しいプロジェクトの場合は、フレームワークに統合された日付関数を使用することをお勧めします。この関数は期待どおりではないかもしれませんが、少なくとも十分です。 。たとえば、
ant design
のangular
バージョンです。
もちろん、angular-datetime-picker
は多くのプロパティとイベントを提供します。 [関連チュートリアルの推奨事項: "angularjs ビデオ チュートリアル "]
例:
owl-date-time
属性は次のとおりです:
属性名 | タイプ | 必要かどうか | デフォルト値 |
---|---|---|---|
両方、 カレンダー、 タイマー
| オプションboth
|
||
ブール値 | Optional | false |
入力ボックスに##もちろん、この記事では、その必要性については説明しません。これらのプロパティとメソッドを変更するだけです。次の 2 つの点について説明します。
Set => Set
次のような関連する html
コードがあります:<ng-container> <input> <owl-date-time></owl-date-time> </ng-container>
Set time formatimport {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 に翻訳する必要があります。
設定 に変換されます。
公式 Web サイトでは次のように紹介されています:
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-picker import { OwlDateTimeTranslator } from './path/to/owl-date-time-translator'; @NgModule({ providers: [ {provide: OwlDateTimeIntl, useClass: OwlDateTimeTranslator}, ], }) export class AppModule { }
結果のレンダリングは次のようになります:
# #プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !
以上がangular-datetime-picker 形式をカスタマイズする方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。