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

Posted

技术标签:

【中文标题】如何在 Angular 2 中使用日期选择器?【英文标题】:How to use date picker in Angular 2? 【发布时间】:2016-04-19 17:12:57 【问题描述】:

我在我的 angular2 应用程序中尝试了许多日期选择器,但它们都没有工作。虽然日期选择器显示在视图上,但所选日期的值没有进入 ngModel 变量。

【问题讨论】:

我认为日期选择器与它无关。因为angular 2中不需要数据绑定 可能是你发布了相应的日期选择器库的代码。 这是一个使用 jquery datepicker 的工作解决方案:***.com/questions/36087762/… 这是一个使用 Jquery DatePicker ***.com/questions/36087762/…的解决方案 【参考方案1】:

事实上,您可以通过简单地将date 值添加到输入的type 属性中来使用日期选择器:

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

在某些浏览器中,例如 Chrome 和 Microsoft Edge(不在 Firefox 中),您可以单击输入中的图标以显示日期选择器。仅当您将鼠标悬停在输入上时才会出现图标。

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

https://github.com/kekeh/mydatepicker https://github.com/jkuri/ng2-datepicker

【讨论】:

thanx 回答,但这是不正确的,请提供您的代码的任何 plnkr 吗? 这里是:plnkr.co/edit/ORPXZraQcoUunvFmhJgs?p=preview。您可以单击输入中的图标以显示日期选择器。仅当您将鼠标悬停在输入上时才会出现图标。我在 Chrome 中试试这个... 我有疑问并在 Firefox 中进行了测试,但没有日期选择器。所以它是特定于 chrome 的 :-( 对于跨浏览器的东西,你可以看看这个:github.com/jkuri/ng2-datepicker。 如何使用今天的日期预填充此字段。我尝试了不同的方法,但没有任何效果。【参考方案2】:

@thierry 回答是的,我们可以选择使用

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

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

我使用 Bootflat 主题制作了两个时尚的日历日期选择器,它也具有响应性,请参阅此处

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

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

【讨论】:

【参考方案3】:

PrimeNG还提供了一个DatePicker组件,现场演示;

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

【讨论】:

如果我在 --prod 角度模式下运行此日期选择器会抛出“未定义 jQuery”的错误?为什么会这样? 我对这个唯一的问题是它没有绑定到 Date 对象。它使用字符串:( 你需要定义对JQueryJQuery UIJQuery UI TimePicker AdOn的依赖。请参阅***.com/a/38255111/641103的答案【参考方案4】:

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

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

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

希望对你有帮助。

【讨论】:

【参考方案5】:

请参阅ng2-boostrap datePicker seems to overwrite ngModel,虽然问题不同,但给出的答案解决了您为我描述的问题。

假设使用 typescript,您需要将其添加到 html 标记中:

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

在组件 ts 文件中,您需要导入

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

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

【讨论】:

虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能会失效。 我是新来这里发帖的,但是为什么你们俩都在***上发布了关于链接页面的完全相同的投诉?我可以轻松地进行建议的更改。 过时过时【参考方案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();
    );


【讨论】:

【参考方案7】:

我今天刚刚找到mydatepicker 包,只需输入npm install mydatepicker --save 并按照说明here 如果您不喜欢他们的命名风格,只需围绕它创建一个适用于日期类型的包装器组件

【讨论】:

【参考方案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-datetimepicker.min.css

bootstrap-datetimepicker.min.js

【讨论】:

【参考方案9】:

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

【讨论】:

对我来说这是目前最好的答案。在我的情况下,来自已接受答案的另外两个无法解决问题 - 如果您想要输出简单的日期字符串 ng2-datepicker,mydatepicker 的数据模型过于复杂,不适合以反应形式很好地绑定 - 这甚至不会从最新的 Angular 开始(9.1.2)。

以上是关于如何在 Angular 2 中使用日期选择器?的主要内容,如果未能解决你的问题,请参考以下文章

Angular:如何配置日期选择器以禁用多个日期范围?

如何将 Angular 日期范围选择器中的日期设置为该月的第一天

Angular 2 - 日期选择器显示 mm/dd/yyyy 而不是对象日期

Angular 12 日期选择器

Material datePicker(Angular)中的多个日期选择

禁用日期的 HTML5 日期选择器在 Angular 中不起作用