Calendar minDate and maxDate bindings don't work #1150

sigad opened this Issue Oct 28, 2016 · 8 comments


None yet

9 participants

sigad commented Oct 28, 2016 edited

Hey everybody,

I have in my form a starting date and a ending date. I set the starting date as the minDate of the ending date field and the ending date as the maxDate of the starting date.

But the binding doesn't work well : for the ending date I could select a date before the starting date and for the starting date I could select a date that is after the ending date.

It seems that both minDate and maxDate are not updated if and only if I changed the month and come back to actual month.

I built a custom calendar component that includes all primeng calendar options.

<div [formGroup]="calendarForm"> <p-calendar #pcalendar [(ngModel)]="date" formControlName="calendar" [minDate]="minDate" [maxDate]="maxDate" [locale]="fr" dateFormat="dd/mm/yy" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputStyleClass="form-control input-sm" (onBlur)="onBlur($event)" (onSelect)="onSelect($event)"> </p-calendar> </div>

`import { Component, Input, Output, EventEmitter, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Calendar } from 'primeng/primeng';
import * as moment from 'moment';

selector: 'sig-calendar',
templateUrl: './my-calendar.component.html'

export class MyCalendarComponent implements OnInit {
@ViewChild('pcalendar') pcalendar: Calendar;
private fr: any;

@Output() minDateChange: EventEmitter<Date> = new EventEmitter<Date>();
@Output() maxDateChange: EventEmitter<Date> = new EventEmitter<Date>();
@Output() dateChange: EventEmitter<Date> = new EventEmitter<Date>();
@Input() date: Date = null;
@Input() minDate: Date = null;
@Input() maxDate: Date = null;

@Input() controlChange: EventEmitter<FormControl> = new EventEmitter<FormControl>();
@Input() control: FormControl = null;
calendarForm: FormGroup;

constructor() { }

ngOnInit() { = {
        firstDay: 1,
        monthNames: [
            'janvier', 'février', 'mars',
            'avril', 'mai', 'juin',
            'juillet', 'août', 'septembre',
            'octobre', 'novembre', 'décembre'
        monthNamesShort: ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 
                        'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
        dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
        dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
        dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S']

    this.calendarForm = new FormGroup({});
    if (this.control) {
        this.calendarForm.addControl('calendar', this.control);

emitChanges() {
    if (this.minDate) {
    if (this.maxDate) {

emitControlChanges() {
    if (this.control) {
        if ( === null) {
            this.control.setErrors({key: 'required'}, {emitEvent: true});

onBlur(event) {
    let newDate: Date = this.strToDate(; = newDate;
    let newValue: string = this.dateToStr(newDate); = newValue;

onSelect(event) {
    let newDate = this.strToDate(event); = newDate;

strToDate(newDateString: string): Date {
    if (newDateString) {
        let mom: moment.Moment = moment(newDateString, 'DD/MM/YYYY');
        if (mom.isValid()) {
            return mom.toDate();
    return null;

dateToStr(newDate: Date, format?: string): string {
    if (newDate && moment(newDate).isValid()) {
        if (format) {
            return moment(newDate).format(format);
        return moment(newDate).format('DD/MM/YYYY');
    // date vide ou incorrecte
    return '';


My form :

Starting date

<sig-calendar #calendarStart

Ending date

<sig-calendar #calendarEnd


I am looking forward for suggestions about this issue.

Thanks in advance,


I have the same issue. I have a form that has a start date and end date. I am trying to use minDate and maxDate to make sure start date can't be chosen before end date, and vice versa.

But when I set the date in the start date field, and then open the calendar for the end date field, all the values for the current month are still available. If I page back to the previous month the dates are disabled as expected, and paging back to the current month will now show dates disabled properly.

moxival commented Nov 4, 2016

I have the same issue #1114


I fixed it with layout refresh, like:
<p-calendar *ngIf="active" ...

export class MyCalendarComponent implements OnInit {
active = true;

onSelect(event) {
... = false;
setTimeout(() => = true, 0);


Thanks @sashabolcina — I'm using that workaround for now too. Hope this gets fixed soon, because the layout refresh causes a blink!

bomberblue07 commented Nov 21, 2016 edited

I have this same issue. Odd that there's no acknowledgement from the devs about this. Still see this in RC 7


I just started using primeng yesterday (actually only for the calendar!) and I'm finding this issue - minDate bindings aren't working and I'm not invested enough to play around with OnInit hacks to get it working...


It's been a month and they've still not fixed this.. Really.


@chrillewoodz submit a PR...?

@cagataycivici cagataycivici added this to the 1.0.1 milestone Nov 30, 2016
@cagataycivici cagataycivici self-assigned this Nov 30, 2016
@cagataycivici cagataycivici changed the title from Calendar [Beta-20]: minDate and maxDate bindings don't work to Calendar minDate and maxDate bindings don't work Nov 30, 2016
@cagataycivici cagataycivici added a commit that closed this issue Nov 30, 2016
@cagataycivici cagataycivici Fixed #1150 0d7a09f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment