如何在Angular 2中使用日期选择器？

Question

我在我的 angular2 应用程序中尝试了很多日期选择器，但是 none 其中 working.Although 日期选择器显示在视图上，但所选日期的值没有进入 ngModel 变量.

Answer 1

事实上，您只需将 date 值添加到输入的 type 属性中即可使用日期选择器：

<input type="date" [(ngModel)]="company.birthdate"/>

在某些浏览器中，例如 Chrome 和 Microsoft Edge（Firefox 除外），您可以单击输入框内的图标以显示日期选择器。只有当鼠标悬停在输入上时才会出现图标。

要跨浏览器，您应该考虑使用符合 Angular2 的库，例如：

Answer 2

正如@thierry 的回答，是的，我们可以选择使用

<input type="date" [(ngModel)]="company.birthdate"/>

获取我们项目的日期。但是是的，这与多浏览器平台（如 mozila）不兼容，并且有许多跨浏览器库。

我使用响应式 Bootflat 主题制作了两个时尚的日历日期选择器，请参考此处

https://github.com/MrPardeep/Angular2-DatePicker

希望这能为您提供更时尚的多浏览器日期选择器。

Answer 3

PrimeNG还提供了一个DatePicker组件，现场演示；

http://www.primefaces.org/primeng/#/calendar

Answer 4

不确定它是否有帮助，但我们想为我们的项目开发一个自定义日期选择器，当时我们找不到很多 Angular2 日期选择器，因此最终自己写了一个简单的。

这是一个简单的选择日期，您还可以指定要在其前后禁用的日期。它使用事件发射器并在文本字段中设置选定日期。它发布在 npm 中，我也在努力改进它。

https://www.npmjs.com/package/angular2-simple-datepicker

希望对您有所帮助。

Answer 5

参见 Whosebug 问题，ng2-boostrap datePicker seems to overwrite ngModel，虽然问题不同，但给出的答案解决了你为我描述的问题。

假设使用打字稿，您需要将其添加到 html 标记中：

<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>

并且在组件ts文件中，你需要导入

import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

并将 DATEPICKER_DIRECTIVES 添加到您的提供商列表中。

[编辑：这适用于旧版本Angular 2.当前版本有更好的选择]

Answer 6

这是我的解决方案：

HTML

<input id="send_date"
       type="text"
       [(ngModel)]="this.dataModel.send_date"
       name="send_date"
       #send_date="ngModel"
       class="date-picker"
       data-date-format="dd-mm-yyyy">

.TS

//My data model has "send_date" property
dataModel: MyDataModel;

ngAfterViewInit() {

    //important point: You have to create a reference to this outer scope
    var that = this;

    $('#send_date').datepicker({
        //... your datepicker attributes
    }).change(function () {
        that.dataModel.send_date = $('#send_date').val();
    });

}

Answer 7

我刚刚发现 mydatepicker package today just type in npm install mydatepicker --save and follow the instructions here 如果您不喜欢他们的命名风格，只需围绕它创建一个适用于 Date 类型的包装器组件

Answer 8

Angular 2（打字稿）

也可以通过 blur 事件做到这一点。

仔细观察 (blur)="newProjectModel.eEDate = eEDatePicker.value" 模糊事件，它将输入临时变量 #eEDatePicker 值分配给我们的模型变量 newProjectModel.eEDate

<form (ngSubmit)="onSubmit()" #newProjectForm="ngForm" >
  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="end-date">Expected Finish Date</label>
        <div class='input-group date datetimepicker'>
          <input type='text' class="form-control" required [(ngModel)]="newProjectModel.eEDate" name="eEDate" #eEDate="ngModel" #eEDatePicker (blur)="newProjectModel.eEDate = eEDatePicker.value" />
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
        <div [hidden]="eEDate.valid || eEDate.pristine" class="alert alert-danger">
          Expected Finish Date is required
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer" [hidden]="submitted">
    <button [hidden]="submitted" type="button" class="btn btn-red" data-dismiss="modal" >Cancel</button>
    <button [hidden]="submitted" type="submit" class="btn btn-green" [disabled]="!newProjectForm.form.valid">Save</button>
  </div>
  <div class="modal-footer" [hidden]="!submitted">
    <button [hidden]="!submitted" focus class="btn btn-green" data-dismiss="modal"  (click)="submitted=false">Ok</button>
  </div>
</form>

我正在使用这些 bootstrap 库：

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

Answer 9

考虑使用 angular-datepicker，它是为 Angular 应用程序构建的高度可配置的日期选择器。

Answer 10

我不确定它是否适用于 angular 的旧版本，因为我是在 Angular 13.1.0 版本中制作的，但您可以试一试它非常简单易用。

npm i @handylib/ngx-datepicker

然后将 NgxDatepickerModule 导入您的模块

您可以根据需要使用 5 个指令

datetimepicker 日期和时间
datepicker 仅限日期
timepicker 仅限时间
monthpicker 仅一个月
yearpicker 仅限年份

用法

<input type="text" datetimepicker placeholder="Please select date and time">

使用自定义格式

<input type="text" datetimepicker [format]="'DD MMMM, YYYY hh:m A'" placeholder="Please select date and time">

我仍在更新它的文档，但我认为对于 angular 13+，它的实现非常简单，因为我已经在很多项目中使用过它。

如何在Angular 2中使用日期选择器？

How to use date picker in Angular 2?

jquery

datepicker

angular2-forms

angular

HTML

.TS

用法