Question

我希望在输入表单中有一个法语日期选择器。

这是ng-bootstrap示例中有一个“英语”：

<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他们解释了如何使用<ngbd-datepicker-i18n></ngbd-datepicker-i18n>使用自定义日期选择器创建一个法语版本，here有更多有关如何使用它的详细信息。

但我想要的是使用他们上面使用的相同的东西，在我的#d="ngbDatepicker"标签内使用模板引用变量input。类似于#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';
}

在那之后并在服务内部创建新类，该类在构造函数内部将NgbDatepickerI18n扩展为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}`;}

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

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

Answer 3

Menga Ramadan在ngbDatePicker文档中所说的内容是指向具有相同结构的演示的链接：

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

这就是您的服务的样子（以我的西班牙语为例）

custom-datepicker-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的组件中提供服务

my-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国际化日期选择器

3 个答案: