带有 javascript 和 datepicker 的 Angular 2 [关闭]答案

【问题标题】：Angular 2 with javascript and datepicker [closed]带有 javascript 和 datepicker 的 Angular 2 [关闭]
【发布时间】：2016-05-30 10:05:50
【问题描述】：

我正在尝试使用 angular 2 和 javascript 创建一个应用程序。我想要日期输入，并且我已经读过所有浏览器都不支持 html 5 输入类型“日期”。我搜索了 angular 2 的日期选择器，我发现了很多日期选择器，但支持打字稿，例如（ Does anyone know a easy date picker to use in an angular 2 app?)。我的问题是是否有任何支持 javascript 的 angular 2 的日期选择器，或者是否有办法在 javascript 中导入 typecipt datepicker？

【问题讨论】：

this one 怎么样？您可以看到它与 Angular2 here 一起使用。
是的，这似乎可行，我知道为了避免在控制器中使用 jquery 的最佳解决方案是尝试将其包装到一个新组件中并使用它。
我尝试根据您发送给我的链接创建自定义 datePicker。这是示例link
@geo 请不要再次陷入 Angular 1 中发生的同样错误...将 JQuery 添加到 Angular 2...根本不需要...检查下面的答案!

标签： javascript datepicker angular angular2-directives

【解决方案1】：

最后，这个问题归结为如何将 JavaScript 日期选择器库与 Angular2 集成？。

如果您只想将日期作为文本值取回，例如：2016 年 6 月 18 日星期六，事情就很简单了。这一切都归结为图书馆如何返回选定的日期。

如果您查看this library，您会发现它使用文本输入来存储所选日期：

<input type="text" id="datepicker">

您需要做的就是将值导入 Angular2。就这样。

您可以通过使用模糊事件来做到这一点：

<input type="text" id="datepicker" 
    #datePicker (blur)="onDateChange(datePicker.value);">

您甚至可以将值赋值给ngModel，从而实现双向数据绑定：

<input type="text" id="datepicker" 
    #datePicker [ngModel]="date" (blur)="date = datePicker.value">

或多或少，您已经将Pikaday 库完全移植到了Angular2。

最后一点，最好将其包装到一个独立的 Angular2 组件中，因为您将获得可重用性和封装性的好处。

【讨论】：

如果我希望它是双向绑定的怎么办？那会是什么样子？
[ngModel] 和 (blur) 充当双向数据绑定。最后，[(ngModel)] 与[ngModel] 和(ngModelChange) - source 相同
@CosminAbabei 我不明白你如何根据输入实例化 pikadate，帮助？

【解决方案2】：

访问 ng2-bootstrap，它有 800 颗星，看看这个日期选择器，https://github.com/valor-software/ng2-bootstrap/blob/development/src/datepicker/datepicker.component.ts

如果你想要一个 javascript 日期选择器，只需使用 bootstrap 中的那个

http://www.eyecon.ro/bootstrap-datepicker/

【讨论】：

再次，这可以与 typescript 一起使用，或者有没有办法将它与 javascript 一起使用？
当然可以和typescript一起使用，它是用typescript写的。但是你真的想要js datepicker，看上面的链接
是的，我已经看到了，特别是这是我用来创建自定义日期选择器的方法，您可以在此处看到 link。所以，我的问题是它是否存在其他东西，或者我是否可以将“打字稿”日期选择器与 javascript 一起使用。
我不确定我是否理解。对我来说 typescript == javascript
更新链接github.com/valor-software/ng2-bootstrap/blob/development/src/…

【解决方案3】：

您可以使用 jQuery Datepicker，它提供了很多功能，而且您可以完全控制这些功能。

例如：你不能在 html-datepicker 中限制你的 dateRange 但是 jQuery-datepicker 你可以限制日期范围

您可以从这里下载：http://jqueryui.com/download/

【讨论】：