首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角度猫头鹰日期时间选取器标签和按钮未本地化

角度猫头鹰日期时间选取器标签和按钮未本地化
EN

Stack Overflow用户
提问于 2019-10-10 18:34:13
回答 2查看 2.9K关注 0票数 1

在猫头鹰日期时间选取器中,From和To标签以及Set和Cancel按钮未本地化。我用于指定区域设置的代码是:

代码语言:javascript
运行
复制
constructor(
  private dateTimeAdapter: DateTimeAdapter<any>
) {
    dateTimeAdapter.setLocale(localStorage.getItem('localeId'));
}

已尝试使用de、fr、zh

"ng-pick-datetime":"^7.0.0“

可能的问题是什么?

编辑:

为了进行测试,我尝试了:

代码语言:javascript
运行
复制
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SampleTableComponent } from './sample-table/sample-table.component';
import { MaterialModule } from './material.module';
import { MatFormComponent } from './mat-form/mat-form.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl } from 'ng-pick-datetime';

export class DefaultIntl extends OwlDateTimeIntl {
  cancelBtnLabel: 'C';
  setBtnLabel: 'S';
  rangeFromLabel: 'F';
  rangeToLabel: 'T';
}

@NgModule({
  declarations: [
    AppComponent,
    SampleTableComponent,
    MatFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
  ],
  providers: [{provide: OwlDateTimeIntl, useClass: DefaultIntl}],
  bootstrap: [AppComponent]
})
export class AppModule { }

但我仍然在看从,到,设置,取消

EN

回答 2

Stack Overflow用户

发布于 2019-10-10 19:36:37

不同语言和格式的本地化是由OWL_DATE_TIME_LOCALEOWL_DATE_TIME_FORMATS定义的。这是official doc

设置区域设置:

默认情况下,OWL_DATE_TIME_LOCALE注入令牌将使用@angular/ LOCALE_ID中的现有核心语言环境代码。如果要覆盖它,可以为OWL_DATE_TIME_LOCALE标记提供一个新值:

代码语言:javascript
运行
复制
import { NgModule } from '@angular/core';
import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';

@NgModule({
  providers: [
    // use french locale
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'fr'},
  ],
})
export class AppExampleModule {
}

还可以在运行时使用DateTimeAdapter的setLocale()方法设置语言环境。

代码语言:javascript
运行
复制
import { Component } from '@angular/core';
import { DateTimeAdapter } from 'ng-pick-datetime';

@Component({
  selector: 'app-example',
  templateUrl: 'app-example.html',
})
export class AppExample {
    constructor(dateTimeAdapter: DateTimeAdapter<any>) {
        dateAdapter.setLocale('ja-JP'); // change locale to Japanese
    }
}

在这些示例中使用法语和日语-在您的示例中应该是zh

在您的情况下,标签和消息似乎没有本地化-尝试以下操作并根据需要调整字符串(我相信是中文的,但如果我错了,请纠正我):

代码语言:javascript
运行
复制
import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';

// here is the default text string - just adjust the strings to reflect your preferred language
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 {
}

资料来源:官方文档

票数 1
EN

Stack Overflow用户

发布于 2020-02-25 20:22:41

代码语言:javascript
运行
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';


 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, OwlDateTimeModule, OwlNativeDateTimeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    // use french locale
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'fr'},
  ]`enter code here`
})
export class AppModule { }

    enter code here
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58320916

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档