Primeng: Calendar in RC.3 doesn't take default-value.

[elastictree]

Please look at this Demo: The default-Value is not visible in the input-field:

http://plnkr.co/edit/HxeUXcnX8HxiqGqNnScQ?p=preview

It was already marked as fixed in https://github.com/primefaces/primeng/issues/1127 but it's still not working, - in my mind.

[murac]

I have just run into this problem as well

[alexreich]

I have run into this too.
Seems like removing these two lines "resolved" it, but obviously broke other things.
[(ngModel)]="foo"
maxDate="+12m"
We are going to stay away from the RCs until Calendar is resolved.

[Xamlware]

I'm having the same problem:

This worked fine in beta.17 and after upgrade not at all. How do I make the initial value display?

the component:

export class KgDateSpinnerComponent implements OnInit, AfterContentInit {
  @Output() onChanged = new EventEmitter<DateSpinnerReturn>();
  @Output() onLoadFood = new EventEmitter<DateSpinnerReturn>();

  sr: DateSpinnerReturn;
  userSettings: User;
  cd = moment();
  currentDate: Date; //string = this.cd.format("MMMM DD, YYYY");;
  dateSpinnerForm: FormGroup;
  isLoadFoodEnabled: boolean;
  initialDate: Date;

  constructor(
    private ts: ThemeService,
    private fb: FormBuilder,
    private ss: SettingsService) {

    this.sr = new DateSpinnerReturn();
  }


  ngOnInit() {
    this.initialDate = this.cd.toDate();
    this.currentDate = this.cd.toDate();
    this.dateSpinnerForm = this.fb.group({
      currentDate: ['', []]
    });


    this.isLoadFoodEnabled = this.checkFoodDate()
  }


  onLoadFoodRequest() {
    this.sr.spinValue = this.currentDate;
    this.onLoadFood.emit(this.sr)
  }

  onDateSelected(event: any) {
    this.cd = moment(event);
    this.returnEvent();
  }

  onIncrement() {
    this.cd = this.cd.add(1, 'day');
    this.returnEvent();
  }

  onDecrement() {
    this.cd = this.cd.subtract(1, 'day');
    this.returnEvent();
  }

  checkFoodDate(): boolean {
    var fd = this.ss.getUserSettings().foodDates;
    var ok = FindHelper.findFoodDate(this.cd.toDate(), fd);
    return ok;
  }

  returnEvent() {
    this.isLoadFoodEnabled = this.checkFoodDate();
    this.currentDate = this.cd.toDate(); //.format("MMMM DD, YYYY");
    this.dateSpinnerForm.controls['currentDate'].setValue(this.currentDate, { onlySelf: true });
    this.sr.spinValue = this.currentDate;
    this.onChanged.emit(this.sr)
  }
}

the html:

<div class="ui-grid ui-grid-responsive ui-grid-pad">
    <div class="ui-g">
        <div class="ui-g-12">
            <div class="ui-g">
                <div class="ui-g-6 ui-md-4 ui-lg-8 spinnerDiv" [ngStyle]="appPageHeaderDivStyle">
                    <div class="ui-g-6 ui-md-4 ui-lg-12 leftPad5">
                        <form [formGroup]="dateSpinnerForm" class="ui form" novalidate>
                            <button pButton (click)="onDecrement()" icon="fa-backward"></button>
                            <div style="padding-top: 10px;width: 208px; display: inline-block;">
                                <p-calendar formControlName="currentDate" [defaultDate]="initialDate" showAnim="slideDown" (onSelect)="onDateSelected($event)" [showIcon]="true"  dateFormat="MM d, yy"></p-calendar>
                            </div>

                            <button pButton (click)="onIncrement()" icon="fa-forward"></button>
                            <button pButton (click)="onLoadFoodRequest()" icon="fa-cutlery" iconPos="left" [disabled]="!isLoadFoodEnabled"></button>
                        </form>
                    </div>
                </div>

                <div class="ui-g-6 ui-md-4 ui-lg-3">
                </div>
            </div>
        </div>
    </div>
</div>

Any ideas?

[kcsahoo]

I am using the following and the calendar control data binding works in all permutations and combinations.
Am I missing something?

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: <h1>My First PrimeNG App</h1> <p-calendar [(ngModel)]="value" dateFormat="dd/mm/yy" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" [showIcon]="true" [readonlyInput]="true"(onSelect)="onDateSelect($event)"></p-calendar>
})
export class AppComponent {
value: Date;

constructor(){
this.value=new Date(2017,10,30);
}

onDateSelect(event){
let dt=event.data;
this.value=new Date(2018,11,29);
}
}

[cacogr]

As a workaround I do in ngOnInit after building my form:

setTimeout(() => {
  this.myForm.get('myDateField').setValue(new Date(myDefaultDate));
});

[murac]

I'm using the formbuilder and the calendar definitely takes the value because when its opened, the correct date is selected, however the input bar is empty. if i simply use [(ngModel)] it the input field is populated and it works as expected. something is going on with the formControlName implementation.

[kcsahoo]

It is not a problem for me in rc.3
I tried to simulate but could not.
Can you debug and see that the initial value is a valid javascript date of type date?

[murac]

Funny thing, I was on RC.2 alas after updating to RC.3 same thing.
here's my markup implementation:
<div formGroupName="appts"><div formGroupName="one"><p-calendar id="one" class="form-control" formControlName="date"></p-calendar></div></div>
before assigning the values to the form I create a Client object where the date field is initialized like so: this.date = appointmentObj && appointmentObj.date !== null ? new Date(appointmentObj.date) : null;
This image is console.log of Client object before initializing form:

This image is the console.log of form.value:

and here's what is looks like:

Is this sufficient information?

[Xamlware]

I am experiencing the exact same thing with my reactive form that murac has reported. The date is being set in the component to a valid date, but the initial value is blank. If I press my increment or decrement date buttons, the date renders in the input control just fine.

[dshupe]

I am seeing the same behavior and I think it is a timing issue. There is an inputfield on the p-calendar control that gets initialized on ngAfterViewInit, but UpdateInputField is being called to set the value before the view is finished being initialized. For me, this is only for a calendar control that is part of a form builder group.

[urzolaj]

Any news on this? Still not setting the text on the input on stable version 2

[elastictree]

I am still working with V 1.1.0, and on this version the issue seems to be solved.

[Mrtcndkn]

Please try with the latest PrimeNG version and comment if the issue still persists.