CODEWITHSUNDEEP
angularprimeng
Kush Patel
Kush Patel

Reputation: 3865

How provide default value in date in primeng

I have calendar dropdown, it is working. However, I want to provide default date in it. How can it do that.

Following is my component as follows:

import {HttpClient} from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
import { isNumber } from '@ng-bootstrap/ng-bootstrap/util/util';

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss'],
    animations: [routerTransition()]
})
export class DashboardComponent implements OnInit {
   value= new Date();
   today_date: string;

   ngOnInit() {
      this.today_date = this.value.getFullYear() + '-' + this.value.getMonth() + '-' + this.value.getDate();
      console.log(this.today_date)
   }
}

HTML code is as follows:

<div>
     <p-calendar (ngModel)="today_date" [inputStyle]="{'width':'100%'}" dateFormat="yy-mm-dd"></p-calendar>
</div>

It is not picking date up. Console.log out is '2017/10/17'

Upvotes: 0

Views: 7869

Answers (1)

Chau Tran
Chau Tran

Reputation: 5098

To my understanding, value of p-calendar is of type Date. So a string wouldn't work. Here's what I have for mine and it works quite well: 

TS
import * as moment from "moment"; //I use MomentJS and I recommend it also. The snippet is based on MomentJS as well.
calendarDate: Date;
ngOnInit() {
 this.calendarDate = moment().toDate();
}

HTML
<p-calendar [ngModel]="calendarDate"></p-calendar>

EDIT: You have a wrong syntax in your HTML template. (ngModel) does not make any sense. It should be [ngModel] for Property Binding, or (ngModelChange) for Event Binding, or [(ngModel)] for two-way binding.

Upvotes: 2

Related Questions