我在我的 angular2 应用程序中尝试了许多日期选择器，但它们都没有工作。虽然日期选择器显示在视图上，但所选日期的值没有进入 ngModel 变量。
问问题
84161 次
9 回答
51
事实上，您可以通过简单地将date值添加到输入的type属性中来使用日期选择器：
<input type="date" [(ngModel)]="company.birthdate"/>
在 Chrome 和 Microsoft Edge 等某些浏览器（不在 Firefox 中）中，您可以单击输入中的图标以显示日期选择器。仅当您将鼠标悬停在输入上时才会出现图标。
要拥有跨浏览器的东西，您应该考虑使用符合 Angular2 的库，例如：
于 2016-01-14T12:08:05.187 回答
5
PrimeNG 还提供了一个 DatePicker 组件，现场演示；
于 2016-02-03T16:24:21.073 回答
2
正如@thierry 回答的那样，是的，我们可以选择使用
<input type="date" [(ngModel)]="company.birthdate"/>
获取我们项目的日期。但是是的，这与多浏览器平台（如 mozila）不兼容，并且有许多跨浏览器库。
我使用 Bootflat 主题制作了两个时尚的日历 Datepicker，它也响应迅速，请参阅此处
希望这给你更时尚和多浏览器的日期选择器。
于 2016-01-21T17:36:13.483 回答
1
不确定它是否有帮助，但我们想为我们的项目开发一个自定义日期选择器，当时我们找不到很多 Angular2 日期选择器，因此最终我自己写了一个简单的。
它是一个简单的选择日期，您还可以指定要在之前和之后禁用的日期。它使用事件发射器并在文本字段中设置选定的日期。它在 npm 上发布，我也在努力改进它。
https://www.npmjs.com/package/angular2-simple-datepicker
希望能帮助到你。
于 2016-03-24T00:33:52.343 回答
1
考虑使用angular-datepicker，它是为 Angular 应用程序构建的高度可配置的日期选择器。
于 2017-10-12T19:16:47.733 回答
1
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>
我正在使用这些引导库：
于 2017-04-05T05:54:16.140 回答
0
这是我的解决方案：
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();
});
}
于 2016-11-28T19:05:08.130 回答
0
我今天刚刚找到mydatepicker包，如果您不喜欢它们的命名风格，只需输入npm install mydatepicker --save并按照此处的说明进行操作，只需在其周围创建一个适用于 Date 类型的包装器组件
于 2017-02-02T01:49:03.667 回答
0
请参阅ng2-boostrap datePicker 似乎覆盖了 ngModel，虽然问题不同，但给出的答案解决了您为我描述的问题。
假设使用打字稿，您需要将其添加到 html 标记中：
<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>
在组件 ts 文件中，您需要导入
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
并将 DATEPICKER_DIRECTIVES 添加到您的提供商列表中。
于 2016-06-03T18:20:49.003 回答