web-dev-qa-db-ja.com

Angular 2で日付ピッカーを使用する方法は？

Angular2アプリで多くの日付ピッカーを試しましたが、どれも機能していません。日付ピッカーはビューに表示されていますが、選択された日付の値はngModel変数に含まれていません。

jquerydatepickerangularangular2-forms
30
Mubashir

実際、入力のdate属性にtype値を追加するだけで、日付ピッカーを使用できます。

<input type="date" [(ngModel)]="company.birthdate"/>

ChromeやMicrosoft Edge（Firefox以外）などの一部のブラウザーでは、入力内のアイコンをクリックして日付ピッカーを表示できます。マウスが入力の上にあるときにのみアイコンが表示されます。

ブラウザーに依存しないものを作成するには、次のようなAngular2準拠のライブラリを使用することを検討する必要があります。

48
Thierry Templier

PrimeNGは、DatePickerコンポーネント、ライブデモも提供します。

http://www.primefaces.org/primeng/#/calendar

5
Cagatay Civici

@thierryが答えたとおり、はい、使用するオプションがあります

<input type="date" [(ngModel)]="company.birthdate"/>

プロジェクトの日付を取得しました。しかし、はい、これはマルチブラウザプレートフォーム（mozilaなど）と互換性がなく、同じためのクロスブラウザライブラリがたくさんあります。

応答性の高いBootflatテーマを使用して2つのスタイリッシュなカレンダーDatepickerを作成しました。こちらも参照してください。

https://github.com/MrPardeep/Angular2-DatePicker

enter image description here

これにより、よりスタイリッシュでマルチブラウザの日付ピッカーが得られることを願っています。

2
Pardeep Jain

それが役立つかどうかはわかりませんが、プロジェクト用にカスタムの日付ピッカーを開発したかったため、その時点で多くのAngular2 Datepickerを見つけることができなかったため、簡単に自分で作成しました。

日付を選択するシンプルなもので、前後に無効にする日付を指定することもできます。イベントエミッタを使用し、選択した日付をテキストフィールドに設定します。これはnpmで公開されており、私も改善に取り組んでいます。

https://www.npmjs.com/package/angular2-simple-datepicker

それが役に立てば幸い。

1
Bhuvana L

Angular 2（TypeScript）

blurイベントでこれを行うこともできます。

blurイベントで(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>

私はこれらのbootstrapライブラリを使用しています：

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

1
Kaleem Ullah

私はちょうど見つけました mydatepicker パッケージは今日npm install mydatepicker --saveを入力して指示に従います here 命名スタイルが気に入らない場合は、その周りにラッパーコンポーネントを作成します日付型で動作します

0
shakram02

ng2-boostrap datePickerがngModelを上書きするようです を参照してください。質問は異なりますが、それに与えられた答えは、あなたが説明した問題を解決しました。

TypeScriptを使用すると仮定すると、これをhtmlマークアップに追加する必要があります。

<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>

コンポーネントtsファイルでは、インポートする必要があります

import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

プロバイダリストにDATEPICKER_DIRECTIVESを追加します。

0
Herb F

angular-datepicker の使用を検討してください。これは、Angularアプリケーション用に構築された高度に構成可能な日付ピッカーです。

enter image description here

0
vlio20

これは私の解決策です：

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

//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();
    });

}
0
ali6p