Primeng: Calendar initial value not visible with reactive forms

[iguissouma]

I having an issue displaying the initial value in a calendar.
My code is like below:

<p-calendar id="startDate" [inline]="false" dateFormat="yy-mm-dd" formControlName="startDate" [(ngModel)]="program.startDate"></p-calendar>

program.startDate is a date not null (startDate: Wed Nov 09 2016 01:00:00 GMT+0100 (Paris, Madrid))

I have blank value on the calendar like below:

When I select another date the date is shown:

I'm using the following version "primeng": "^1.0.0-rc.1" with ultima-ng theme.

Thanks.

[kcsahoo]

Please use rc.3 for correct operation

[tdi83]

I have the same issue with rc.3.

loanDate is new Date('2013-06-30')
Value is displayed in DatePicker, but missing in the text field of calendar.

[iguissouma]

I updated to the rc3 today, I can confirm I have the same issue.
I deleted prime-ng from node_modules the run npm install

npm install
[email protected] C:\dev\clients\cf\projects\op\frontend
└── [email protected]

Run again my application.
The text field of calendar is still empty.

[dshupe]

We are also having issues with the initial date showing blank in the input field. In our case it happens when we have a form group that contains another form group of controls. We want to render the calendar control in a table like this:

<table class="table table-hover table-bordered table-responsive table-sm">
    <tr *ngFor="let subGroup of someForm.controls;">
        <td>
            <p-calendar [formControl]="subGroup.controls.DateExecuted"></p-calendar>
        </td>
    </tr>
</table>

The initial date value is not displaying. We cannot use formControlName in this case since we are inside an *ngFor of the subGroup of controls.

[iguissouma]

Same behaviour in rc4

[dshupe]

Verified that this is not fixed in rc4. Still cannot see initial value in the textbox of the p-calendar, but when the calendar drops down. the correct date is selected.

[ShankarSumanth]

Hi Guys,
I have put together a working sample for this issue. I believe that the initial value is usually initialized in the constructor or the onInit method and my guess is that untill the UI is rendered these initial value is not picked up by angular. My idea was to insert this value in the ngAfterViewInit method so that once the view is initialized by angular and angular starts tracking these values it is easy to update the value.
Strange but works.

html file
`

<label>Start Date</label>

<p-calendar [(ngModel)]="value" formControlName="calendar" ></p-calendar>

`

ts file
`export class TestComponent implements AfterViewInit {

value: Date;

registerForm: FormGroup;

constructor(private formBuilder: FormBuilder) {

    this.value = new Date();

    this.registerForm = this.formBuilder.group({
        calendar: ''
    });
    this.registerForm.get('calendar').valueChanges.subscribe(value =>
        console.log(value)
    );
}

ngAfterViewInit() {
    this.registerForm.get('calendar').setValue(this.value);
}

}`

Hope this solution helps you all.

[iguissouma]

This issue is fixed in rc5.

[atigm]

I have the same problem with "primeng": "4.2.1" !

<form ....
<p-calendar [(ngModel)]="model.date" name="date"
                        [showIcon]="true" showTime="showTime" hourFormat="24" >
</p-calendar>

Thanks.

[markgoho-EDT]

Still seeing this in v5

[milindwmahajan]

Try converting date to ISO before using it on the form.
using moment
moment(r.birthDate).toDate();

[AmirGilboa]

Yes! that that did the trick. 2 hours i'm on this. thanks @milindwmahajan .
converting to ISO solved it.