时间戳

首页 > 解决方案 > 如何国际化 ng-bootstrap 日期选择器？

javascript - 如何国际化 ng-bootstrap 日期选择器？

问题描述

在我的项目中，我使用ng-bootstrap datePicker。我的 datePicker 小部件非常简单：DEMO。

但我需要将他的国际化（需要设置俄语）。请帮我。

js：

import {Component} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  styles: [``]
})
export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered = (date: NgbDate) => this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  isInside = (date: NgbDate) => date.after(this.fromDate) && date.before(this.toDate);
  isRange = (date: NgbDate) => date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date)
}

标签： javascriptangulartypescriptdatepicker

解决方案

您可以简单地使用：

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from "@angular/common";
import localeRo from "@angular/common/locales/ro";
import localeRoExtra from "@angular/common/locales/extra/ro";

registerLocaleData(localeRo, "ro", localeRoExtra);

然后在 @NgModule 装饰器中使用提供者：

providers: [{ provide: LOCALE_ID, useValue: "ro-RO"}]

没有必要NgbDatepickerI18n！
Angular for 德语的一个工作示例ngbdatepicker在 stackblitz 上： https ://stackblitz.com/edit/angular-mezpyn-b6tm1r?file=app%2Fdatepicker-popup.module.ts

推荐阅读