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的更多信息。我按照下面的代码更改了代码。

exists

Answer 2

gdal_calc

您可以这样写。

[startDate] =“ {年份：来自API dob.getYear（），月份：来自API dob.getMonth（）}”

Answer 3

通过添加以下导入语句，您可以获取NgbDatePicker输入以从Angular 9中的[（ngModel）] =“ model.dob”读取/写入Javascript日期：

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

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

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

Answer 4

我尝试使用{year: 2020, month: 10, day: 30 }格式设置值，这对我有用。如果当天的值不存在，则通知值将不会显示给NgbDateAdapter选择器。我遵循here

中的解决方案

Answer 5

对于那些寻求完整实现的人（通过最小日期、最大日期并将值设置为日期选择器）：

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 个月。您可以根据自己的要求自由更改此设置。

ngbDatepicker设定值

5 个答案: