Установленное значение ngbDatepicker

В моем приложении Angular, управляемой шаблоном формы, у меня есть поле даты рождения и я добавил ngbDatepicker для этого поля.

<input #dob="ngbDatepicker"
                 (click)="dob.toggle()"
                 [(ngModel)]="model.dob"
                 [ngClass]="{ 'is-invalid': f.submitted &&  dob.invalid }"
                 class="form-control"
                 id="dob"
                 name="dob"
                 required
                 type="text"
                 [disabled]="isDisabled"
                 [class.ash]="isDisabled"
                 [class.highlight]="!isDisabled"
                 ngbDatepicker
          />

Я получаю бэкэнд API для даты рождения dob: "2019-02-16 00:00:00" и я хочу передать это значение, как показано ниже,

 { 
  "year": 2019, 
  "month": 2, 
  "day": 26 
 }

потому что ngbDatepicker получить значение в этом формате. Это то, что я пытался преобразовать мою дату рождения.

toDate(dob) {
 const [year, month, day] = dob.split('-');
 const obj = { year: year, month: month, day: day.split(' ')[0].trim() };
 console.log('convert date', obj);
 this.model.dob = obj;
 //  this.model.dob ={year: 2017, month: 5, day: 13};
}

Выход {year: "2019", month: "02", day: "16"} Я хочу удалить кавычки из этого вывода. Я перепробовал так много методов и не смог получить нужный результат. Я мог бы получить {"year": 2019, "month": 02, "day": 16} этот вывод, используя ниже код.

JSON.stringify({ "year": "2019", "month": "2", "day": "26" }, (key, value) => !isNaN(+value) ? +value : value);

Но чтобы установить дату мне нужно установить объект, как это. {year: 2019, month: 2, day: 26 }

Источник

7 ответов

Решение

Я мог бы решить мою проблему, используя parseInt. Используйте эту ссылку, чтобы узнать больше о parseInt. Я изменил свой код, как указано ниже.

toDate(dob) {
if (dob) {
  const [year, month, day] = dob.split('-');
  const obj = { year: parseInt(year), month: parseInt(month), day: 
    parseInt(day.split(' ')[0].trim()) };
  this.model.dob = obj;
  }
}
Источник

Этим я решил свою проблему.

Создать экземпляр NgbDate до,

date = new NgbDate(2020,19,02);

сделайте эту дату как ngModel;

Источник

Я пытаюсь установить значение с форматом {year: 2020, month: 10, day: 30 }это работает для меня. Обратите внимание на значение дня, если день не существует в этом месяце, значение не будет отображаться в средстве выбора NgbDateAdapter. Я следую решению отсюда

Источник

Для тех, кто ищет полную реализацию для этого (с передачей минимальной даты, максимальной даты и установки значения для средства выбора даты):

NgbDatePicker URL: https://ng-bootstrap.github.io/#/components/datepicker/overview

В вашем контроллере компонентов datepicker.component.ts файл добавьте следующее:

      import { NgbDate } from "@ng-bootstrap/ng-bootstrap";
import { NgbDateHelper } from 'src/app/helpers/ngb-date-helper';

Добавить в раздел конструктора

      constructor(
    private ngbDateHelper: NgbDateHelper
) { }

в datepicker.component.html просмотреть файл добавить

      <input
  class="form-control"
  placeholder="yyyy-mm-dd"
  formControlName="dateFieldName"
  ngbDatepicker
  #date="ngbDatepicker"
  [minDate]="minDate"
  [maxDate]="maxDate"
  [(ngModel)]="value"
/>

Чтобы получить minDate, maxDate, value - напишем помощник

Создать файл src/app/helpers/ngb-date-helper.ts

Добавьте следующее содержимое:

      import { Injectable } from '@angular/core';
import { NgbDate } from "@ng-bootstrap/ng-bootstrap";

@Injectable()
export class NgbDateHelper {
  // helper to find out today's year, month, day
  private currentDate() {
    var todayDate = new Date();

    return {
      year: todayDate.getFullYear(),
      month: todayDate.getMonth() + 1,
      day: todayDate.getDate()
    }
  }

  // helper to find out date value, min and max date
  dateMetaData() {
    var minDate = this.currentDate()
    var maxDate = this.currentDate()
    maxDate.year = maxDate.year + 1
    
    var value = new NgbDate(this.currentDate().year,
                            this.currentDate().month + 2,
                            this.currentDate().day)

    return {
      value: value,
      minDate: minDate,
      maxDate: maxDate
    }
  }
}

назовите даты так:

      value: this.ngbDateHelper.dateMetaData().value,
minDate: this.ngbDateHelper.dateMetaData().minDate,
maxDate: this.ngbDateHelper.dateMetaData().maxDate

В этом примере календарь показывает даты от сегодняшней даты до даты 1 года. Предварительно заполненное значение составляет 2 месяца с сегодняшней даты. Вы можете изменить это по своему усмотрению.

Источник

Вы можете получить входные данные NgbDatePicker для чтения / записи дат Javascript из / в [(ngModel)]="model.dob" в Angular 9, добавив следующий оператор импорта:

import { NgbDate, NgbDateStruct, NgbDateAdapter, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';

и объявление поставщика NgbDateAdapter в вашем операторе @Component:

providers: [
    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }]
Источник 
<ngb-datepicker #d [startDate]="{year: 1789, month: 7}"></ngb-datepicker>

Вы можете написать так

[startDate]="{год: из API dob.getYear(), месяц: из API dob.getMonth()}"

Источник

Этот способ работал для меня:

в тс файле:

const date: NgbDateStruct = { year: 1789, month: 7, day: 14 };

в хтмл:

<input type="text" ngbDatepicker [(ngModel)]="date"/>

Источник
Другие вопросы по тегам