The Primeng calendar in Angular shows only future dates if the minimum date is set to the current date. Past dates are not

Question

The Primeng calendar in Angular shows only future dates if the minimum date is set to the current date. Past dates are not

Is there a way to make Primeng calendar display past end date values without using the [disabledDates] property, even if the minDate is set as the current date?

Check out the code below:

<p-calendar  [showIcon]="true"
inputId="icon" [minDate]="minDate" [showOtherMonths]="false" dateFormat="dd-M-yy"
formControlName="LICENCE_END_DATE"></p-calendar\>

Currently, when minDate is set to new Date(), the value of formcontrolname - LICENCE_END_DATE shows a past value 'Wed Jul 31 2024 23:59:59 GMT+0530 (India Standard Time)' despite both minDate and selected date formats being similar.

However, the p-calender control does not display this past value. Any solutions or workarounds for this issue?

angular typescript datepicker primeng

Answer 1

Answer №1

Ensure that the minDate is set to null in order for the values to appear.

If you input a valid date, any dates prior to the minDate will be disabled.

Answer 2

Ensure that the minDate is set to null in order for the values to appear.

If you input a valid date, any dates prior to the minDate will be disabled.

Answer 3

Answer №2

I encountered a similar issue, and the solution below successfully resolved it:

minDate = new Date(
 Date.parse(
  ${new Date().getMonth() + 1}/${new Date().getDate()}/${new Date().getFullYear()}`
 )
);

This piece of code creates a date without including the time component. Typically, when constructing a new Date object without any arguments, you would receive the exact datetime. However, in this situation, to ensure that the minDate is displayed correctly in CalendarModule without considering the time aspect, I decided to set the time to 0.

For instance:

Let's assume it is October 9th, 2024, and the time is 7:25AM.

let date1 = new Date(),
console.log(date1) // Wed Oct 09 2024 07:26:14 GMT+0200

let minDate = new Date(
 Date.parse(
  ${new Date().getMonth() + 1}/${new Date().getDate()}/${new Date().getFullYear()}`
 )
);
console.log(minDate) // Wed Oct 09 2024 00:00:00 GMT+0200

Answer 4

I encountered a similar issue, and the solution below successfully resolved it:

minDate = new Date(
 Date.parse(
  ${new Date().getMonth() + 1}/${new Date().getDate()}/${new Date().getFullYear()}`
 )
);

This piece of code creates a date without including the time component. Typically, when constructing a new Date object without any arguments, you would receive the exact datetime. However, in this situation, to ensure that the minDate is displayed correctly in CalendarModule without considering the time aspect, I decided to set the time to 0.

For instance:

Let's assume it is October 9th, 2024, and the time is 7:25AM.

let date1 = new Date(),
console.log(date1) // Wed Oct 09 2024 07:26:14 GMT+0200

let minDate = new Date(
 Date.parse(
  ${new Date().getMonth() + 1}/${new Date().getDate()}/${new Date().getFullYear()}`
 )
);
console.log(minDate) // Wed Oct 09 2024 00:00:00 GMT+0200

Answer 5

Answer №3

Consider using commas to separate your parameters.

For instance:

let maxNum = Math.max(10, 20, 30, 40);

Answer 6

Consider using commas to separate your parameters.

For instance:

let maxNum = Math.max(10, 20, 30, 40);

The Primeng calendar in Angular shows only future dates if the minimum date is set to the current date. Past dates are not

Answer №1

Answer №2

Answer №3

Similar questions

I'm facing the challenge of trying to work on an Angular project without access to the node_modules folder, and unfortunately, I

Fill an Angular form with information sent by a different application

Exploring the Power of Angular 4's HttpClient Module

Error encountered: Type 'IPromise<{}>' is not compatible with type 'IPromise<IWebErrors[]>'. This issue arose during the migration from Typescript version 1.8 to 2.5

Troubleshooting Issue: Relative Paths Fail to Work with routerLink in Angular 6

I'm looking to retrieve a specific file from my Angular Firestore database

ng-click not triggering the typeScript function

Design buttons that are generated dynamically to match the style

Angular service from an external package is experiencing issues with dependency injection where the HttpClient is returning

Issue with auto formatting quotes in IntelliJ / WebStorm is no longer functioning as expected

Angular 8: A Guide to Updating Tags in innerHTML

React useContext with TypeScript error: "property is not recognized on '{}'"

The form fails to appear if there are no values entered

In Angular, a white screen may suddenly appear if the scrolling speed is too fast

Error occurred when attempting to link user services with report controller

What is the best method for extracting the initial data from an array?

receiving feedback from Firebase push action

Allow users to select only certain dates within the Bootstrap datepicker

Discovering the cause of the "Module not found" error for nrwl packages

Develop a cutting-edge TypeScript library that allows for seamless resolution of optional dependencies by the application