Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut

Bagaimana untuk menyesuaikan format sudut-tarikh-pemilih? Artikel berikut membincangkan cara menyesuaikan format saya harap ia akan membantu semua orang!

Saya telah menggunakan Angular baru-baru ini untuk projek pembangunan dan penyelenggaraan. Saya menghadapi masalah tarikh dan rakan sekerja saya menggunakan @danielmoncada/angular-datetime-picker.

PS: Sudah tentu, jika ia adalah projek baharu, ia masih disyorkan untuk menggunakan fungsi tarikh yang disepadukan dengan rangka kerja Walaupun fungsi itu mungkin tidak seperti yang anda harapkan, ia sekurang-kurangnya cukup . Contohnya, versi ant design angular.

Sudah tentu, angular-datetime-picker menyediakan banyak hartanah dan acara. [Cadangan tutorial berkaitan: "tutorial video angularjs"]

Contohnya:

owl-date-time atribut ialah:

属性名称	类型	是否必要	默认值
pickerType	both, calendar, timer	可选	both
yearOnly	布尔值	可选	false

Untuk hartanah dan kaedah lain, sila pergi ke laman web rasmi untuk melihat

Sudah tentu, dalam artikel ini kami tidak membincangkan keperluan untuk menukar sifat dan kaedah ini dengan mudah. Mari kita bincangkan dua perkara:

• Paparkan YYYY/MM/ HH:mm:ss dalam kotak input Format

• Terjemahan - Tukar nama butang Cancel => 取消, Set => 设置

Nilai lalai semasa ialah seperti ini:

Kami telah berkaitan html Kodnya adalah seperti berikut:

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

Tetapkan format masa

Diperkenalkan dalam 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 {
}

Graf yang terhasil ialah seperti berikut:

Butang terjemahan

Kita perlu menggunakan pengantarabangsaan pakej ini untuk menterjemahkan Cancel yang sepadan ke dalam 取消, Set diterjemahkan ke dalam 设置.

Laman web rasmi telah memperkenalkan:

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 { }

Kami menyepadukan mengikut idea di atas untuk merealisasikan keperluan kami:

Buat fail terjemahan baharuowl-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');
  }

};

Di sini kami telah memperkenalkan perkhidmatan terjemahantranslationService, yang membolehkan anda memilih bahasa mengikut wilayah yang berbeza.

Kemudian kami beroperasi pada 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 {
}

Rendering yang terhasil adalah seperti berikut:

Lebih banyak pengetahuan berkaitan pengaturcaraan , sila layari: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menyesuaikan format pemilih masa-masa-sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!