ホームページ > ウェブフロントエンド > jsチュートリアル > angular-datetime-picker 形式をカスタマイズする方法について話しましょう

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

青灯夜游
リリース: 2022-09-08 20:29:41
転載
2842 人が閲覧しました

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

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

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

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

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

例:

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

##pickerTypeオプションyearOnlyブール値Optional
属性名 タイプ 必要かどうか デフォルト値
両方カレンダータイマー both
false
#他のプロパティとメソッドについては、公式 Web サイトにアクセスしてご覧ください。

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

入力ボックスに
    YYYY/MM/ HH:mm:ss
  • を表示する 形式

    翻訳 - ボタンの名前を変更します
  • Cancel => Cancel
  • Set => Set

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

次のような関連する angular-datetime-picker 形式をカスタマイズする方法について話しましょうhtml

コードがあります:

1

2

3

4

<ng-container>

  <input>

  <owl-date-time></owl-date-time>

</ng-container>

ログイン後にコピー
Set time format

app.module.ts

で導入:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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 {

}

ログイン後にコピー
結果のグラフは次のとおりです:

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

このパッケージの国際化を使用して、対応する Cancel

CancelSet に翻訳する必要があります。 設定 に変換されます。 公式 Web サイトでは次のように紹介されています:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

を操作します:

1

2

3

4

5

6

7

8

9

10

11

12

13

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 形式をカスタマイズする方法について話しましょうをご覧ください。 !

以上がangular-datetime-picker 形式をカスタマイズする方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート