3

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

4

5 回答 5

7

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

创建 NgbDate 实例，

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

将此日期设为 ngModel；

于 2020-02-17T11:34:12.637 回答
3

我可以使用“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;
  }
}
于 2019-02-12T07:09:24.070 回答
1

对于那些正在寻求完全实现的人（通过minimum date,maximum date和set the value日期选择器）：

NgbDatePicker 网址：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 个月。您可以根据自己的要求随意更改。

于 2021-07-29T14:11:44.453 回答
0 
<ngb-datepicker #d [startDate]="{year: 1789, month: 7}"></ngb-datepicker>

你可以这样写。

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

于 2019-02-12T07:32:49.750 回答
0

您可以通过添加以下导入语句来获取 NgbDatePicker 输入以在 Angular 9 中从/到 [(ngModel)]="model.dob" 读取/写入 Javascript 日期：

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

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

providers: [
    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }]
于 2020-07-27T20:38:01.837 回答