Question

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

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

Answer 1

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

使用 - npm install --save ng2-bootstrap

安装软件包

安装moment.js typings - 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

Answer 2

ng-bootstrap是一个非常好的库，由有角度的人建造。基本上它是为了支持bootstrap css而不使用它们的jquery部分而创建的。

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

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

不要忘记看到样本，在你下载很多配置选项之后它远远低于它。

Answer 3

你可以使用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;
      }
      }
      }
    }

Answer 4

无需担心“我应该使用哪个日期选择器？”请使用任何日期选择器引导日期选择器，jQuery日期选择器，本机HTML5日期选择器等。

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

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

 <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="@string/auto_location"/>

 <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version"/>

内部控制器：

                 <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>

多数民众赞成在运作。：）

Answer 5

我在两周前和我发现PrimeNG时的情况完全相同，它非常方便，并且非常好地集成在每个Angular生态系统（SystemJS，Webpack）中，它将用于模板驱动表单和模型驱动表单。试一试：http://www.primefaces.org/primeng/#/calendar

Answer 6

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

Answer 7

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

示例：

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

完整代码：

＆＃13;

<!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 -->

＆＃13;

Angular2 datepicker

7 个答案: