0

我正在尝试使用日期选择器，但它似乎没有显示在输入控件中。数据会正确返回，因为我可以将其传输到屏幕上并查看它。

角度版本：“@angular/core”：“~11.2.11”
引导版本：“@ng-bootstrap/ng-bootstrap”：“^10.0.0”，“bootstrap”：“^4.6.0”

返回的数据（日期）：

“2020-10-21T09:39:04.357”

我想只输出月、日和年。

即使我返回一个也不显示的“2016-05-10”字符串。

如果我从日历中选择一个日期，它会正确更新我的模型。它显示为：

{ “年”：2021，“月”：8，“日”：12 }

我尝试声明一个变量并绑定到该变量，但它也不起作用。我的变量是：

bsValue = new Date();

<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd"
      name="lastActivityDate" [(ngModel)]="user.lastActivityDate"
      ngbDatepicker #d2="ngbDatepicker">
  <div class="input-group-append">
    <div class="input-group-text" (click)="d2.toggle()">
      <i class="fa fa-calendar" style="cursor: pointer;"></i>
    </div>
  </div>
</div>
4

2 回答 2

0

在您的组件中，将 DatePipe 添加到构造函数并初始化您的日期：

constructor(
  private datePipe: DatePipe
) { }

yourForm: any = {
  date: this.datePipe.transform(new Date(1999, 6, 15), "yyyy-MM-dd")
}

在您的模板中：

<form>
  <div class="form-group">
    <label for="date">Date</label>
    <input
      type="date"
      name="date"
      id="date"
      class="form-control"
      [(ngModel)]="yourForm.date"
    />
  </div>
</form>

type="date"将使日期的格式本地化。如果您的浏览器设置为格式为“dd-MM-yyyy”的语言环境，它将以您想要的方式显示。

在你的模块中：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [DatePipe], // <-----
  bootstrap: [AppComponent]
})
于 2021-08-12T22:41:04.723 回答
0

根据NG-Bootstrap DatePicker 日期模型和格式，

Datepicker 使用 NgbDateStruct 接口作为模型，而不是原生的 Date 对象。

因此，您需要将 Date String 转换为NgbDateStruct或NgbDate键入以绑定到[(ngModel)].

解决方案 1：将日期字符串转换为NgbDate或NgbDate键入。

投射到NgbDate类型

import { NgbDate } from '@ng-bootstrap/ng-bootstrap';

let date = new Date("2020-10-21T09:39:04.357");
let dateModel: NgbDate = new NgbDate(
  date.getFullYear(),
  date.getMonth() + 1,
  date.getDate())
);

投射到NgbDateStruct类型

import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

let date = new Date("2020-10-21T09:39:04.357");
let dateModel: NgbDateStruct =  {
  year: date.getFullYear(),
  month: date.getMonth() + 1,
  day: date.getDate()
};

StackBlitz 上的示例解决方案 1

解决方案 2：应用自定义日期适配器

自定义日期适配器允许将日期字符串绑定到[(ngModel)]自定义日期字符串格式。

日期适配器.ts

import { Injectable } from '@angular/core';
import {
  NgbDateAdapter,
  NgbDateParserFormatter,
  NgbDateStruct
} from '@ng-bootstrap/ng-bootstrap';

/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {
  readonly DELIMITER = '-';

  fromModel(value: string | null): NgbDateStruct | null {
    if (value) {
      let date = new Date(value);
      return {
        day: date.getDate(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
      };
    }
    return null;
  }

  toModel(date: NgbDateStruct | null): string | null {
    if (date) {
      let dateObj = new Date(date.year, date.month - 1, date.day);
      return dateObj.toISOString();
    }

    return null;
  }
}

/**
 * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
 */
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    if (value) {
      let date = new Date(value);
      return {
        day: date.getDate(),
        month: date.getMonth() + 1,
        year: date.getFullYear()
      };
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date
      ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year
      : '';
  }
}

app.module.ts

import {
  NgbDateAdapter,
  NgbDateParserFormatter,
  NgbModule
} from '@ng-bootstrap/ng-bootstrap';
import { CustomAdapter, CustomDateParserFormatter } from './datepicker-adapter';

@NgModule({
  ...
  providers: [
    { provide: NgbDateAdapter, useClass: CustomAdapter },
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class AppModule {}

StackBlitz 上的示例解决方案 2

参考

自定义日期适配器和格式化程序

于 2021-08-13T03:32:08.157 回答