How can I disable past time in PrimeNG p-calendar?

Question

There is one question already :-

How can I disable past dates in angular p-calendar?

But I want to disable (or prevent) the past time also. For example if right now it is 14:00 Hrs, the user should not be able to enter anything less than that. Not even 13:59 Hrs. For preventing past date they have something called minDate which I'm already using but there is nothing to restrict time.

I tried this first:

HTML:

<p-calendar (onInput)="onInput($event)" [minDate]="minDate" [showTime]="true" hourFormat="24">
</p-calendar>

TS:

onInput(e) {
  console.log('Event: ', e);
}

But this way I wasn't able to capture the field value:

So I tried another approach inspired from these two questions:

How to get input value from in primeNG?

Compare two dates with JavaScript

HTML:

<p-calendar #myCalender (onInput)="onInput($event,myCalender)" ...>
</p-calendar>

TS:

onInput(e, mc) {
  console.log('Value: ', mc.inputFieldValue);
  const enteredDate = mc.inputFieldValue;
  if (enteredDate.getTime() > new Date().getTime()) {
    console.log('previous date');
    // disable Apply button and apply red border css
  } else {
    console.log('future date');
    // enable Apply button and remove red border css
  }
}

This time I was able to get the value while every time I type into it but I still need help with comparison of dates logic. My logic is not working correctly. Please pitch in.

Joosep Parts · Answer 1 · 2022-07-31T01:37:55.817

Wouldn't just setting the minDateValue = new Date() be sufficent? Date obj takes account of the time as well as the date.

Edit

I added onBlur() function, to check if typed date is less then allowed. If so then change it back to min. This could be expanded to a custom form validator if needs be but the point is same. Probably why your function didn't work is because the library emits an ISO date string, not a Date obj. Date obj's are comparable with <. I use onBlur so user has time to finish typing, with input listener we would otherwise overwrite right away not giving the user a change to enter a date.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  selectedDate: any;
  minDateValue = new Date();

  onBlur() {
    if (
      this.dateIsValid(new Date(this.selectedDate)) &&
      new Date(this.selectedDate) < this.minDateValue
    ) {
      this.selectedDate = this.minDateValue;
      console.warn('Overwriting date!');
    }
    console.log(this.selectedDate);
  }

  dateIsValid(date) {
    if (
      typeof date === 'object' &&
      date !== null &&
      typeof date.getTime === 'function' &&
      !isNaN(date)
    ) {
      return true;
    }

    return false;
  }
}

 <h5>Popup Mindate now()</h5>
<div class="p-fluid p-grid p-formgrid">
  <div class="p-field p-col-12 p-md-4">
    <label for="time">Time</label>
    <p-calendar
      [(ngModel)]="selectedDate"
      (onBlur)="onBlur()"
      [minDate]="minDateValue"
      [showTime]="true"
      inputId="time"
    ></p-calendar>
  </div>
</div>

Working demo: https://stackblitz.com/edit/primeng-calendar-demo-g2vyki?file=src%2Fapp%2Fapp.component.html

No it didn't help. Even in your working demo also i can go back to any previous date and time. But I really appreciate your efforts. Thanks. — Tanzeel, Jul 30 '22 at 17:01
It works and of course you can go back. It's a calendar. You said you want the past dates to be **disabled** - this is what it does. It disables selecting them, but doesn't remove them from the calendar view. Do you mean, you also want to prevent the user form typing in the date manually? — Joosep Parts, Jul 30 '22 at 17:35
Sir I've clearly mentioned in the question "...For preventing past date they have something called minDate which I'm already using but there is nothing to restrict time.". My issue is about the time. I can manually type in the previous time (and date as well). That's why ive written my own logic using `onInput()` event. I need to apply some CSS when date is previous. Hope I was able to explain the problem state,ent. — Tanzeel, Jul 30 '22 at 18:08
Ok got it. I added `onBlur` function, to check if typed date is less then allowed. If so then change it back to min. This could be expanded to a custom form validator if needs be but the point is same. Probably why your function didn't work is because the library emits an ISO date string, not a Date obj. Date obj's are comparable with `<`. I use `onBlur` so user has time to finish typing, with input listener we would otherwise overwrite right away not giving the user a change to enter a date. — Joosep Parts, Jul 31 '22 at 01:33

How can I disable past time in PrimeNG p-calendar?

1 Answers1

Edit