angular-datetime-picker 形式をカスタマイズする方法について話しましょう

angular-datetime-picker 形式をカスタマイズするにはどうすればよいですか?次の記事ではフォーマットのカスタマイズ方法について説明していますので、皆様のお役に立てれば幸いです。

私は最近、プロジェクトの開発と保守に Angular を使用しています。日付の問題が発生し、同僚は @danielmoncada/angular-datetime-picker を使用しました。

PS: もちろん、新しいプロジェクトの場合は、フレームワークに統合された日付関数を使用することをお勧めします。この関数は期待どおりではないかもしれませんが、少なくとも十分です。 。たとえば、ant design の angular バージョンです。

もちろん、angular-datetime-picker は多くのプロパティとイベントを提供します。 [関連チュートリアルの推奨事項: "angularjs ビデオ チュートリアル "]

例:

owl-date-time 属性は次のとおりです:

##pickerTypeオプションyearOnlyブール値Optional

属性名	タイプ	必要かどうか	デフォルト値
	両方、カレンダー、タイマー		both
			false

#他のプロパティとメソッドについては、公式 Web サイトにアクセスしてご覧ください。

##もちろん、この記事では、その必要性については説明しません。これらのプロパティとメソッドを変更するだけです。次の 2 つの点について説明します。

入力ボックスに

YYYY/MM/ HH:mm:ss
• を表示する 形式
  翻訳 - ボタンの名前を変更します
Cancel => Cancel
• 、

  Set => Set

  #現在のデフォルト値は
です。この

:

次のような関連する html

コードがあります:

<ng-container>
  <input>
  <owl-date-time></owl-date-time>
</ng-container>

Set time format

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

を

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 サイトの他の関連記事を参照してください。