How to use date picker in Angular 2?

Question

I have tried many date picker in my angular2 app but none of them is working.Although the date picker is displaying on the view but the value of selected date is not getting in the ngModel variable.

Answer 1

I am not sure if it's going to work on older versions of Angular because I wrote it in Angular v13.1.0, but you can give it a shot - it's very simple to use.

npm i @handylib/ngx-datepicker

then import NgxDatepickerModule to your module

There are 5 directives which you can use according to your needs

1. datetimepicker for date and time
2. datepicker for date only
3. timepicker for time only
4. monthpicker for month only
5. yearpicker for year only

USAGE

<input type="text" datetimepicker placeholder="Please select date and time">

To use custom format

<input type="text" datetimepicker [format]="'DD MMMM, YYYY hh:m A'" placeholder="Please select date and time">

I am still updating its documents but I think for angular 13+ its very simple to implement as I have already used it on whole lot of projects.

Answer 2

See Stackoverflow question, ng2-boostrap datePicker seems to overwrite ngModel, while the question is different, the answers given to it solved the issue you described for me.

Assuming using typescript, you need to add this to the html markup:

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

and in the component ts file, you will need to import

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

and add the DATEPICKER_DIRECTIVES to your providers list.

[Edit: This applies to an older version of Angular 2. There are much better choices in current versions]

Answer 3

consider using angular-datepicker, it's a highly configurable date picker built for Angular applications.

Answer 4

Angular 2 (Typescript)

can also do this with blur event.

look closely at (blur)="newProjectModel.eEDate = eEDatePicker.value" on blur event it assigns input temporary variable #eEDatePicker value to our model variable 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>

I'am using these bootstrap libraries:

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

Answer 5

I just found mydatepicker package today just type in npm install mydatepicker --save and follow the instructions here if you don't like their naming style, just create a wrapper component around it that works with Date type

Answer 6

This is my solution:

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

}

Answer 7

In fact, you can use a datepicker by simply adding the date value into the type attribute of your inputs:

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

In some browsers like Chrome and Microsoft Edge (not in Firefox), you can click on the icon within the input to display the date picker. Icons appear only when you mouse is over the input.

To have something cross browsers, you should consider to use Angular2 compliant libraries like:

• https://github.com/kekeh/mydatepicker
• https://github.com/jkuri/ng2-datepicker

Answer 8

As answered by @thierry yes there is option for us to use

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

for getting date for our project. but yes this is not compatible for the multi browser plateform (like mozila) and there are many cross browser library for the same.

I have made two stylish calendar Datepickers using Bootflat theme which is responsive too refer here

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

hope this gives you more stylish and multi browser datepicker.

Answer 9

Not sure if it helps but we wanted to develop a custom datepicker for our project and we couldn't find a lot of Angular2 Datepicker's at that point and hence ended up writing a simple one myself.

Its a simple one which selects the date and you can also specify dates that you want to disable before and after. It uses event emitter and sets the selected date in a text field. It is published in npm and I am working on improving it as well.

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

Hope it helps.

Answer 10

PrimeNG also provides a DatePicker component, live demo;

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