Angular2 日期选择器答案

【问题标题】：Angular2 datepickerAngular2 日期选择器
【发布时间】：2016-10-02 06:06:58
【问题描述】：

我是 angular2 的新手，我喜欢它。我正在尝试将 datepicker 用于 angular2 应用程序。我尝试了一些组件，例如 ng2-datepicker 和 mydatepicker，但没有一个不能轻松学习。

您能否为这个问题提供非常详细的说明？

【问题讨论】：

你试过 ng2 引导日期选择器吗？ github.com/valor-software/ng2-bootstrap

标签： angular datepicker

【解决方案1】：

如果你想尝试其他的 datepicker，那么你可以使用 ng2-bootstrap 的 datepicker。步骤如下-

使用-npm install --save ng2-bootstrap安装包

安装 moment.js 类型 - typings install moment --save

在 systemjs.config.js 中，您可以像这样更新配置-

map: {
  moment: 'node_modules/moment/moment.js'
}

在 Index.html 中添加这一行-

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

DatepickerModule 作为应用程序模块 app.module.ts 中的导入模块

import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
// or
import { DatepickerModule } from 'ng2-bootstrap/components/datepicker';

在html模板中-

  <div style="display:inline-block; min-height:290px;">
    <datepicker [(ngModel)]="dt" [showWeeks]="true"></datepicker>
  </div>

在组件中你可以像这样设置 dt-

public dt:Date = new Date();

更多详情请参考link

【讨论】：

【解决方案2】：

ng-bootstrap 是一个非常棒的库，由 angular 家伙构建。基本上它的创建是为了支持引导 css，而不使用他们的 jquery 部分。

它有类似的 datepicker 和其他与 Bootstrap 外观和功能相匹配的组件。

安装非常简单，并且得到了制造商的大力支持。查看他们的文档和配置下方的一些示例。 @ng-bootstrap/ng-bootstrap

不要忘记查看示例，在您向下滚动时，它在下方很远，经过很多配置选项。

【讨论】：

【解决方案3】：

你可以使用 ng2-bootstrap http://valor-software.com/ng2-bootstrap/#/ 但我觉得不好因此，您可以将 datetimepicker 与 bootstrap 一起使用：

import { DatePipe } from '@angular/common'
      @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>Hello {{name}}</h2>
          <input type="date" value={{todate}} class="form-control" (change)="changeInput($event.target.value)" /><br />
          <span>{{showdate}}</span>
        </div>
      `,
      providers: [DatePipe]
    })
    export class App {
      name:string;
      todate: any;
      showdate: any;
      constructor(private datePipe: DatePipe) {
        this.name = 'Angular2'
        this.todate = this.datePipe.transform(new Date(),'yyyy-MM-dd')
      }
      changeInput(event){
        this.showdate = event;
      }
      }
      }
    }

【讨论】：

【解决方案4】：

无需担心“我应该使用哪个日期选择器？” 使用您喜欢的任何日期选择器，例如引导日期选择器、jQuery 日期选择器、原生 HTML5 日期选择器等。

Angular2 不会将您绑定到任何特定的库，它会自动更新其更改（不像 Angular1）。

我按如下方式使用它（只是 Bootstrap 日期选择器）：

                 <div class="col-md-6">
                    <div class="form-group">
                      <label>Date of birth</label>
                      <input id="dobDatepicker" type="text" class="form-control" placeholder="dd/MM/yyyy" name="profile_dob" readonly="readonly"
                             style="cursor: pointer;background: #fff;border-bottom: 2px solid #d8d8d8;">
                      <p class="message-input error-input">
                        {{!dobDta?'Required':''}}
                      </p>
                    </div>
                  </div>

内部控制器：

jQuery('#dobDatepicker').datepicker({
        autoclose: true,
        todayHighlight: true,
        endDate:new Date(),
        format: 'dd/mm/yyyy'
      }).change(()=>{
        this.dobDta=jQuery('#dobDatepicker').val();
      });

那就是它正在工作。 :)

【讨论】：

【解决方案5】：

两周前我遇到了同样的情况，就像我发现 PrimeNG 之前一样，它非常方便，并且很好地集成到了每个 Angular 生态系统（SystemJS、Webpack）中，它适用于模板驱动表单和模型驱动表单。试试看：http://www.primefaces.org/primeng/#/calendar

【讨论】：

【解决方案6】：

http://primefaces.org/primeng/#/calendar 它具有您可能需要的所有配置，并且它的原生 angular2 内部没有像其他框架那样的 jquery。

【讨论】：

【解决方案7】：

您可以尝试使用官方的角度/材质库。

例子：

<md-input-container>
    <input mdInput type="date">
</md-input-container>

完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Angular Material Plunker</title>

    <!-- Load common libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
    System
        .import('main.ts')
        .catch(console.error.bind(console));
    </script>

    <!-- Load the Angular Material stylesheet -->
    <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
            font-family: Roboto, Arial, sans-serif;
        }
    </style>
</head>

<body>
    <input-form-example>Loading Material Docs example...</input-form-example>
</body>

</html>


<!-- Copyright 2016 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

【讨论】：