Angular2 - Binding of datepicker

Question

How do I get the chosen date of input and put the tag <p>.

I'm using the jqueryUI datepicker, already I tried to do the binding trying to capture with the change and click events, but did not work.

Can anybody help me?

import "rxjs/Rx";
import {Component, AfterViewInit} from '@angular/core';

declare var $: any;

@Component({
    selector: '<my-evento></my-evento>',
    template: `<input (change)="updateDate($event)" type="text" id="datepicker">
               <p>{{ date }}</p>`
})

export class EventoComponent implements AfterViewInit{
    date: string;

    constructor(){}

    ngAfterViewInit() {
       $(function() {
            $("#datepicker").datepicker();
        });
    }

    updateDate($event): void {
        this.date = $event.target.value;
    }
}

you may want to take a look at ngModel angular.io/docs/ts/latest/api/forms/index/… — Jacob Roberts
– Jacob Roberts, Commented Sep 22, 2016 at 13:23
it only makes the binding when I write in input. <input [(ngModel)]="date" type="text" id="datepicker"> but when I use the calendar does not do the binding — rafaelcb21
– rafaelcb21, Commented Sep 22, 2016 at 14:17
Inject in a 'ChangeDetectorRef' angular.io/docs/ts/latest/api/core/index/… and call either markForCheck or detectChanges to trigger an update. Also have a look at the DoChecklifecycle hook angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheck which is where you'd make your calls on the ChangeDetectorRef — Jacob Roberts
– Jacob Roberts, Commented Sep 22, 2016 at 14:27
I have read and tried to do, but this a bit confusing, you could show the code in my example? — rafaelcb21
– rafaelcb21, Commented Sep 22, 2016 at 14:49
export class EventoComponent implements AfterViewInit, DoCheck{ constructor(private _cdr: ChangeDetectorRef) {} ngDoCheck() { this._cdr.detectChanges(); } } — Jacob Roberts
– Jacob Roberts, Commented Sep 22, 2016 at 15:02

m_drunk · Accepted Answer · 2017-01-29 03:09:48Z

2

when you bind the model like this:

<input [(ngModel)]="date" type="date" id="datepicker">

does the compiler tell you that the format has to be in yyyy-dd-mm format?

if so, you may need to use a custom directive or bind the date field with the date pipe like this:

<input [ngModel]="date | date:'y-MM-dd'" (ngModelChange)="date=$event" type="date" id="datepicker">

answered Jan 29, 2017 at 3:09

m_drunk

381 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 - Binding of datepicker

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related