how to enable future date enable 30-Apr-2025

Question

Tuhin Paul · Answer

Below I am sharing a demo code: JSFiddle - Code Playground and also the full code: Demo: https://jsfiddle.net/u5jh6wg2/ Datepicker Demo body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } label { display: block; margin-bottom: 10px; } input { padding: 5px; width: 200px; } Date Picker Demo Select a date between the minimum date and 30-Apr-2025. Installation Date: $(document).ready(function() { var minimumDate = new Date(); // Today's date var maximumDate = new Date("2025-04-30"); // 30-Apr-2025 $("#installationDate").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/M/yy", minDate: minimumDate, maxDate: maximumDate, showOn: "both", buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif", buttonImageOnly: true, buttonText: "Select date", onClose: function(selectedDate) { // You can add additional logic here if needed console.log("Selected date:", selectedDate); } }); });

Tuhin Paul · Answer

Part -1 To enable future dates up to 30-Apr-2025 in your date picker, you need to check that the maxDate option is set correctly. In your code, you are already setting maxDate to currentDate , which is defined as new Date("30/Apr/2025") . // Get the minimum date from the hidden field var minimumdate = document.getElementById("PageContent_hdnVdate").value; // Set the maximum date to 30-Apr-2025 var currentDate = new Date("2025-04-30"); // Use ISO format (YYYY-MM-DD) for better compatibility // Initialize the date picker function GetRestart1() { $("# ").datepicker({ changeMonth: true, // Allow changing months changeYear: true, // Allow changing years dateFormat: "dd/M/yy", // Set the date format maxDate: currentDate, // Set the maximum selectable date minDate: minimumdate, // Set the minimum selectable date showOn: "both", // Show the date picker on both button and input field click buttonImage: "../img/calendar.png", // Set the calendar icon buttonImageOnly: true, // Show only the icon, not the text onClose: function (selectedDate) { // Update the minimum date for other date pickers if needed $("# ").datepicker("option", "minDate", selectedDate); } }); } Date Format for currentDate : Changed new Date("30/Apr/2025") to new Date("2025-04-30") . The ISO format ( YYYY-MM-DD ) is more reliable across different browsers and environments. showOn Option : You had showOn: "button" and showOn: "both" duplicated. I kept showOn: "both" to check the date picker shows on both the input field and the button click. onClose Function : This function updates the minDate for other date pickers if needed. If you don’t have other date pickers to synchronize, you can remove this part.

Amira Bedhiafi · Answer

I think your issue is how the currentDate is being set. The new Date("30/Apr/2025") syntax may not work as expected due to potential inconsistencies in parsing date formats across browsers. var minimumdate = document.getElementById("PageContent_hdnVdate").value; var currentDate = new Date(2025, 3, 30); function GetRestart1() { $("# ").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/M/yy", maxDate: currentDate, minDate: new Date(minimumdate), showOn: "button", buttonImage: "../img/calendar.png", buttonImageOnly: true, onClose: function (selectedDate) { $("# ").datepicker("option", "minDate", selectedDate); } }); }