在输入中使用 ng-bootstrap 国际化日期选择器

Question

我想在输入表单中使用法语日期选择器。

这里是 ng-bootstrap 的例子，有一个 "english"：

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <button class="input-group-addon" (click)="d.toggle()" type="button">
        <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
      </button>
    </div>
  </div>
</form>

Here they explained how to make a french one using <ngbd-datepicker-i18n></ngbd-datepicker-i18n> with a custom datepicker and 关于如何使用它有更多的细节。

但我想要的是使用他们在上面使用的相同内容，在我的 input 标记内使用模板引用变量 #d="ngbDatepicker"。类似于 #d="myCustomNgbDatepicker".

可能吗？如果是，怎么做？

Answer 1

你必须做两件事

一个 DateI18nFormater 扩展了 NgbDatepickerI18n
一个 DateParserFormatter 扩展了 NgbDateParserFormatter

在你的 module.ts

providers: [
        { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
        I18n, 
        { provide: NgbDatepickerI18n, useClass: DateI18nFormater }
    ]

Answer 2

我使用相同的HTML语法

<div class="q-datepicker position-relative w-100">
            <input
                formControlName="From"
                class=" form-control rounded-corner bg-white primary-font-color"
                placement="bottom"
                placeholder=""
                [minDate]=""
                ngbDatepicker
                #d="ngbDatepicker"
                readonly=""
            />
            <button
                type="button"
                (click)="d.toggle()"
            >
                <i class="far fa-calendar-alt"></i>
            </button>
        </div>

然后我创建一个新的服务文件，包括以下内容：

const I18N_VALUES = {
'Eng': {weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 
'Nov', 'Dec'],
},
'Frn': {
 weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
 months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep','Oct','Nov', 'Déc']
 }  };




 @Injectable()
language: string = 'Eng';
}

在那之后，在服务内部创建新的 class，它在构造函数

中用 super() 扩展 NgbDatepickerI18n

并实施以下内容：

getWeekdayShortName(weekday: number): string {
return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];}

getMonthShortName(month: number): string {
return I18N_VALUES[this._i18n.language].months[month - 1];}

getMonthFullName(month: number): string {
return this.getMonthShortName(month);}

 getDayAriaLabel(date: NgbDateStruct): string {
return `${date.day}-${date.month}-${date.year}`;}

在组件的最后导入最后一个服务并在组件中添加以下内容

providers: [{provide: NgbDatepickerI18n, useClass: nameOfYourClassWhichExtendsNgbDatepickerI18n}]

Answer 3

添加到 Menna Ramadan 在 ngbDatePicker 文档中所说的是 link 具有相同结构的演示：

https://ng-bootstrap.github.io/stackblitzes/datepicker/i18n/stackblitz.html

这是您的服务应该是什么样的（在我的例子中是西班牙语）

自定义日期选择器-i18n.service.ts

import { Injectable } from '@angular/core';
import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
  'es': {
    weekdays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
    months: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
  }
  // other languages you would support
};

// Define a service holding the language. You probably already have one if your app is i18ned. Or you could also
// use the Angular LOCALE_ID value
@Injectable()
export class I18n {
  language = 'es';
}

@Injectable()
export class CustomDatepickerI18nService extends NgbDatepickerI18n {

  constructor(private _i18n: I18n) {
    super();
  }

  getWeekdayShortName(weekday: number): string {
    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
  }
  getMonthShortName(month: number): string {
    return I18N_VALUES[this._i18n.language].months[month - 1];
  }
  getMonthFullName(month: number): string {
    return this.getMonthShortName(month);
  }

  getDayAriaLabel(date: NgbDateStruct): string {
    return `${date.day}-${date.month}-${date.year}`;
  }
}

然后在使用ngbdatepicker的组件中提供服务

我的-component.ts

import { Component, OnInit } from '@angular/core';

import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { CustomDatepickerI18nService, I18n } from 'src/app/services/ngbpicker/custom-datepicker-i18n.service';


@Component({
  selector: 'app-mi-perfil',
  templateUrl: './mi-perfil.component.html',
  styleUrls: ['./mi-perfil.component.css'],
  providers: [I18n,{provide: NgbDatepickerI18n, useClass: CustomDatepickerI18nService}]
})
export class MyComponent implements OnInit {
  
  constructor() {}

  ngOnInit(): void {}

}

你应该只需要它来让它工作。问候！

在输入中使用 ng-bootstrap 国际化日期选择器

Use a ng-bootstrap internationalized datepicker in an input

datepicker

internationalization

ng-bootstrap

angular