Calendar minDate and maxDate bindings don't work #1150

Closed
sigad opened this Issue Oct 28, 2016 · 8 comments

Projects

None yet

9 participants

@sigad
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.

my-calendar.component.html:
<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>

my-calendar.component:
`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';

@Component({
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() {
    this.fr = {
        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) {
        this.minDateChange.emit(this.minDate);
    }
    if (this.maxDate) {
        this.maxDateChange.emit(this.maxDate);
    }
    this.dateChange.emit(this.date);
    this.emitControlChanges();
}

emitControlChanges() {
    if (this.control) {
        this.control.setValue(this.date);
        this.control.markAsDirty();
        this.control.markAsTouched();
        if (this.date === null) {
            this.control.setErrors({key: 'required'}, {emitEvent: true});
        }
        this.control.updateValueAndValidity();
        this.controlChange.emit(this.control);
    }
}

onBlur(event) {
    let newDate: Date = this.strToDate(event.target.value);
    this.date = newDate;
    let newValue: string = this.dateToStr(newDate);
    event.target.value = newValue;
    this.emitChanges();
}

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

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
[(date)]="filter.startDate"
[(control)]="startDateControl"
[(maxDate)]="filter.endDate">

Ending date

<sig-calendar #calendarEnd
[(date)]="filter.endDate"
[(control)]="endDateControl"
[(minDate)]="filter.startDate">

`

I am looking forward for suggestions about this issue.

Thanks in advance,

@fis-dan-wnuk

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
Contributor
moxival commented Nov 4, 2016

I have the same issue #1114

@sashabolcina

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

export class MyCalendarComponent implements OnInit {
active = true;
...

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

@jessepinho
Contributor

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

@bomberblue07
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

@jacobedawson

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...

@chrillewoodz

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

@jessepinho
Contributor

@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