Как изменить формат даты ngbDatepicker с JSON на YYYY / MM / DD

Question

Я работаю с ngbDatepicker, это дает мне формат даты JSON, такой как:

{ year: 2019, month: 6, day: 9 }

Как я могу преобразовать это в YYYY / MM / DD?Я использую Angular 7.

Мой код указан ниже:

<div class="input-group">
   <input class="form-control" placeholder="YYYY-MM-DD"
          (click)="d2.toggle()" (ngModelChange)="onDateSelection($event,'ToDate');"  name="d2" #c2="ngModel" [(ngModel)]="toDate" ngbDatepicker #d2="ngbDatepicker">
         <div class="input-group-append">
          <button class="btn btn-outline-secondar" 
             (click)="d2.toggle()" type="button">
           <i class="fa fa-calendar" aria-hidden="true"></i>
          </button>
         </div>
 </div>

Answer 1

Есть два важных класса для управления ngbDate.один предназначен для форматирования даты: DateParserFormater, а другой - для изменения значения, которое вы получаете / отправляете из / в ngb-datepicker: DateAdapter.

Таким образом, вы можете создать customDateAdapter и customDateParserFormatter.Но не беспокойтесь об именах.Это только два класса для инъекций, например,

Для customDateAdapter

@Injectable()
export class CustomDateAdapter {
  fromModel(value: string): NgbDateStruct
  {
     if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]}
  }

  toModel(date: NgbDateStruct): string // from internal model -> your mode
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)
           +"/"+('0'+date.day).slice(-2):null
  }
}

Да, класс для инъекций с двумя функциями: одна для преобразования NgbDate в строку, а другая для преобразования строки в NgbDate.помните, что это меняет вашу «модель»

для CustomDateParserFormatter

@Injectable()
export class CustomDateParserFormatter {
  parse(value: string): NgbDateStruct
  {
    if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]} as NgbDateStruct

  }
  format(date: NgbDateStruct): string
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)+"/"+('0'+date.day).slice(-2):null
  }
}

Снова инъецируемый класс с двумя функциями: одна для преобразования NgbDate в строку, а другая для преобразования строки в NgbDate.Помните, что это меняет «формат» даты - полезно, если вы хотите, например, дд / мм / гггг -

Затем просто добавьте в качестве поставщиков в свой компонент

  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
              {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]

В stackblitz см. Определение компонента, которое вы можете выбрать, например,

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]
})

или

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
          {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

, даже если вы можете написать

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

ToПовторите манипулирование объектами, такими как {год, месяц, день}, но измените «маску» и способ ввода даты

ПРИМЕЧАНИЕ. Вы также можете добавить провайдеров в модуль

Answer 2

Что вам нужно, это

var date = object.year + '/' + object.month + '/'+ object.day