jQuery 如何在 Angular 2 中使用日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34788543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use date picker in Angular 2?
提问by Mubashir
I have tried many date picker in my angular2 app but none of them is working.Although the date picker is displaying on the view but the value of selected date is not getting in the ngModel variable.
我在我的 angular2 应用程序中尝试了许多日期选择器，但它们都没有工作。虽然日期选择器显示在视图上，但所选日期的值没有进入 ngModel 变量。
回答by Thierry Templier
In fact, you can use a datepicker by simply adding the datevalue into the typeattribute of your inputs:
事实上，您可以通过简单地将date值添加到type输入的属性中来使用日期选择器：
<input type="date" [(ngModel)]="company.birthdate"/>
In some browsers like Chrome and Microsoft Edge (not in Firefox), you can click on the icon within the input to display the date picker. Icons appear only when you mouse is over the input.
在某些浏览器中，例如 Chrome 和 Microsoft Edge（不在 Firefox 中），您可以单击输入中的图标以显示日期选择器。仅当鼠标悬停在输入上时才会出现图标。
To have something cross browsers, you should consider to use Angular2 compliant libraries like:
要拥有跨浏览器的功能，您应该考虑使用 Angular2 兼容库，例如：
回答by Cagatay Civici
PrimeNG also provides a DatePicker component, live demo;
PrimeNG 还提供了一个 DatePicker 组件，现场演示；
回答by Pardeep Jain
As answered by @thierry yes there is option for us to use
正如@thierry 所回答的，是的，我们可以选择使用
<input type="date" [(ngModel)]="company.birthdate"/>
for getting date for our project. but yes this is not compatible for the multi browser plateform (like mozila) and there are many cross browser library for the same.
获取我们项目的日期。但是是的，这与多浏览器平台（如 mozila）不兼容，并且有许多跨浏览器库。
I have made two stylish calendar Datepickers using Bootflat theme which is responsive too refer here
我已经使用 Bootflat 主题制作了两个时尚的日历日期选择器，该主题也具有响应性，请参阅此处
hope this gives you more stylish and multi browser datepicker.
希望这给你更时尚和多浏览器的日期选择器。
回答by Kaleem Ullah
Angular 2 (Typescript)
角 2（打字稿）
can also do this with blurevent.
也可以通过blur事件来做到这一点。
look closely at (blur)="newProjectModel.eEDate = eEDatePicker.value"on blur event it assigns input temporary variable #eEDatePickervalue to our model variable newProjectModel.eEDate
仔细观察(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>
I'am using these bootstrap libraries:
我正在使用这些引导库：
bootstrap-datetimepicker.min.css
bootstrap-datetimepicker.min.css
回答by vlio20
consider using angular-datepicker, it's a highly configurable date picker built for Angular applications.
考虑使用angular-datepicker，它是为 Angular 应用程序构建的高度可配置的日期选择器。
回答by Bhuvana L
Not sure if it helps but we wanted to develop a custom datepicker for our project and we couldn't find a lot of Angular2 Datepicker's at that point and hence ended up writing a simple one myself.
不确定它是否有帮助，但我们想为我们的项目开发一个自定义日期选择器，当时我们找不到很多 Angular2 Datepicker，因此最终自己编写了一个简单的。
Its a simple one which selects the date and you can also specify dates that you want to disable before and after. It uses event emitter and sets the selected date in a text field. It is published in npm and I am working on improving it as well.
它是一个简单的选择日期，您还可以指定要在之前和之后禁用的日期。它使用事件发射器并在文本字段中设置所选日期。它发布在 npm 中，我也在努力改进它。
https://www.npmjs.com/package/angular2-simple-datepicker
https://www.npmjs.com/package/angular2-simple-datepicker
Hope it helps.
希望能帮助到你。
回答by Herb F
See ng2-boostrap datePicker seems to overwrite ngModel, while the question is different, the answers given to it solved the issue you described for me.
请参阅ng2-boostrap datePicker 似乎覆盖了 ngModel，虽然问题不同，但给出的答案解决了您为我描述的问题。
Assuming using typescript, you need to add this to the html markup:
假设使用打字稿，您需要将其添加到 html 标记中：
<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>
and in the component ts file, you will need to import
在组件 ts 文件中，您需要导入
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
and add the DATEPICKER_DIRECTIVES to your providers list.
并将 DATEPICKER_DIRECTIVES 添加到您的提供者列表中。
回答by ali6p
This is my solution:
这是我的解决方案：
HTML
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
.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();
});
}
回答by shakram02
I just found mydatepickerpackage today just type in npm install mydatepicker --saveand follow the instructions hereif you don't like their naming style, just create a wrapper component around it that works with Date type
我今天刚刚找到mydatepicker包，只需输入npm install mydatepicker --save并按照此处的说明进行操作，如果您不喜欢它们的命名样式，只需在其周围创建一个适用于 Date 类型的包装器组件
