ngbDatepicker 设置值

Question

在我的 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 }

Answer 1

我可以使用 'parseInt' 解决我的问题。使用这个 link 来了解更多关于 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;
  }
}

Answer 2

<ngb-datepicker #d [startDate]="{year: 1789, month: 7}"></ngb-datepicker>

你可以这样写。

[startDate]="{年：从 API dob.getYear()，月：从 API dob.getMonth()}"

Answer 3

我这样做解决了我的问题。

创建 NgbDate 实例，

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

将此日期设置为 ngModel；

Answer 4

您可以在 Angular 9 中将 NgbDatePicker 输入到 read/write Javascript 日期 from/to [(ngModel)]="model.dob" 通过添加以下导入语句：

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

并在您的@Component 语句中声明 NgbDateAdapter 提供程序：

providers: [
    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }]

Answer 5

对于那些正在寻求完整实施的人（将 minimum date、maximum date 和 set the value 传递给日期选择器）：

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 设置值

ngbDatepicker set value

angular

angular6

ngb-datepicker

angular-template-form