javascript - 带有 javascript 和日期选择器的 Angular 2

标签 javascript datepicker angular angular2-directives

<分区>

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

最佳答案

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

如果您只对以文本值形式返回日期感兴趣,例如:2016 年 6 月 18 日星期六,事情就很简单了。这一切都取决于图书馆如何返回选定的日期。

如果你看this library您会看到它使用文本输入来存储所选日期:

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

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

  • 您可以使用模糊事件来做到这一点:

    <input type="text" id="datepicker" 
        #datePicker (blur)="onDateChange(datePicker.value);">
    
  • 您甚至可以将值赋给ngModel从而实现双向数据绑定(bind):

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

或多或少,你已经完全移植了Pikaday Angular2 的库。

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

关于javascript - 带有 javascript 和日期选择器的 Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37522935/

相关文章:

javascript - jQuery Datepicker 打开时的 knockout 更改会破坏 Datepicker

单击时检查元素是否具有类的angular2模板div

javascript - 如何从异步调用返回响应?

css - 带有自定义主题的 bootstrap 3 datepicker - 看起来很讨厌

javascript - 我想使用 async/await 访问 API

jquery - minDate 和 maxDate 选项在日期选择器中不起作用

angular - 深层嵌套组件不显示

angular - 如何在 Angular 中打印单个组件?

javascript - ES6 可迭代的约定?

javascript - 将 Angular 从 5.1 升级到 8 后 NgStyle 出现问题