Изменение шаблона ввода ngbDatepicker - PullRequest
Новая
       8

Изменение шаблона ввода ngbDatepicker

0 голосов
/ 03 ноября 2018

Я работаю над приложением, которое использует этот пример:

https://stackblitz.com/angular/rynxmynlykl

Я хочу отобразить выбранную дату в другом формате. Вместо yyyy-mm-dd я хочу mm/dd/yyyy. Заполнитель достаточно легко изменить, но мне не удается найти то, что я ищу в документах (https://ng -bootstrap.github.io / # / components / datepicker / api ).

ngModel принимает объект, который содержит год, месяц и день. Datepicker затем форматирует его в вышеуказанный формат.

Ближайший ответ, который я нашел, здесь, но сейчас устарел ( Как изменить структуру модели загрузчика с угловым питанием ngbDatepicker ).

Кто-нибудь сталкивался с таким сценарием раньше?

1 Ответ

0 голосов
/ 03 ноября 2018

Как указано в документации DatePicker , вы можете предоставить пользовательскую версию NgbDateParserFormatter . Смотрите этот стек для демонстрации.

Следующий код для анализатора / форматера адаптирован из this GitHubGist от Niels Robin-Aubertin : 

import { Injectable } from "@angular/core";
import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split('/');
      if (dateParts.length === 1 && this.isNumber(dateParts[0])) {
        return { year: this.toInteger(dateParts[0]), month: null, day: null };
      } else if (dateParts.length === 2 && this.isNumber(dateParts[0]) && this.isNumber(dateParts[1])) {
        return { year: this.toInteger(dateParts[1]), month: this.toInteger(dateParts[0]), day: null };
      } else if (dateParts.length === 3 && this.isNumber(dateParts[0]) && this.isNumber(dateParts[1]) && this.isNumber(dateParts[2])) {
        return { year: this.toInteger(dateParts[2]), month: this.toInteger(dateParts[0]), day: this.toInteger(dateParts[1]) };
      }
    }
    return null;
  }

  format(date: NgbDateStruct): string {
    let stringDate: string = "";
    if (date) {
      stringDate += this.isNumber(date.month) ? this.padNumber(date.month) + "/" : "";
      stringDate += this.isNumber(date.day) ? this.padNumber(date.day) + "/" : "";
      stringDate += date.year;
    }
    return stringDate;
  }

  private padNumber(value: number) {
    if (this.isNumber(value)) {
      return `0${value}`.slice(-2);
    } else {
      return "";
    }
  }

  private isNumber(value: any): boolean {
    return !isNaN(this.toInteger(value));
  }

  private toInteger(value: any): number {
    return parseInt(`${value}`, 10);
  }
}

Парсер / форматировщик даты добавлен к поставщикам в модуле: 

import { NgbDateParserFormatter, ... } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateParserFormatter } from "./datepicker-formatter";

@NgModule({
  ...
  providers: [{ provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }]
})
export class AppModule { }
...