Search code examples
angularprimengprimeng-calendar

Using the PrimeNG Calendar to input data in a database

I'm trying to replace the textbox with the PrimeNG calendar but keep the functionality of it storing the value that will be saved in the database.

I thought that maybe something like combining input and p-calendar would work:

<p-calendar #CreateDate [(ngModel)]="CreateDates" [value]="{{CreateDates}}" [showIcon]="true" dateFormat="dd.mm.yy"></p-calendar>

but this obviously doesn't work and results in a lot of errors.

The exception I am getting:

Parser Error: Got interpolation ({{}}) where expression was expected

Along with the following errors: enter image description here

Solution

  • When using an Angular2 directive you do not have to use the interpolation syntax to access a value. Also because you are two-way binding to the variable CreateDates it will automatically add the value to your calendar as long as its a valid date. Make sure the value in CreateDates is a valid date and do this

    <p-calendar #CreateDate [(ngModel)]="CreateDates" 
[showIcon]="true" dateFormat="dd.mm.yy"></p-calendar>