Установленное значение 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.info('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 }
Ответы 5
Я мог бы решить свою проблему, используя '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;
}
}
<ngb-datepicker #d [startDate] = "{year: 1789, month: 7}"></ngb-datepicker>
Вы можете написать так.
[startDate] = "{год: из API dob.getYear(), месяц: из API dob.getMonth()}"
Я решил свою проблему, сделав это.
Создайте экземпляр NgbDate,
date = new NgbDate(2020,19,02);
сделать эту дату как ngModel;
Да, он отлично работает, возвращает объект с каждой частью даты.
Вы можете получить ввод NgbDatePicker для чтения/записи дат Javascript из/в [(ngModel)]="model.dob" в Angular 9, добавив следующий оператор импорта:
import { NgbDate, NgbDateStruct, NgbDateAdapter, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';
и объявление провайдера NgbDateAdapter в вашем операторе @Component:
providers: [
{ provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }]
Для тех, кто ищет полную реализацию этого (с передачей minimum date, maximum date и set the value в средство выбора даты):
URL-адрес NgbDatePicker: https://ng-bootstrap.github.io/#/components/datepicker/обзор
В файл 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 месяцам с сегодняшней даты. Вы можете изменить это в соответствии с вашими требованиями.
Я не мог использовать это решение по нескольким причинам. когда я получаю день от API, он идет с пробелом и 00:00:00. И точно так же мне нужно поле ввода.