How to make an input box enable for only past dates and for the startdate if it falls in the current month?

[asifakhtar]

how to make an input box enable for only past dates and for the startdate that if it falls in the current month in JavaScript.
The input box should be disabled for future dates and for the startdate if it falls in the current month.
I have implemented the function but not sure the following logic will work for every scenario.

((new Date(startDate)).getMonth() === new Date().getMonth() || startDate > new Date())

const globalPendingStatusIDL3 = "76070";
      
const check_IsExternalUser_And_PendingStatusL3  = (statusID = null, startDate = null) => {       
    return !!statusID && !!startDate ? (statusID === "76070" && ((new Date(startDate)).getMonth() === new Date().getMonth() || startDate > new Date())) : false;
};

//Code where the input box is being created and disabled being set using a loop:
strHTML += "<td width=\"100px\"><input class=\"form-control target-form\" data-recordid=\"" + recordid + "\" data-oldvalue=\"" + actualValue + "\" id=\"txtActualValue_" + recordid + "\" data-prevrecordid=\"" + (prevrecordid == "" ? "" : ("txtActualValue_" + prevrecordid)) + "\" value=\"" + actualValue + "\"" + (globalIsStaff ? "" : (check_IsExternalUser_And_PendingStatusL3(statusID,startDate) === true ? "disabled" : "")) + "/></td>";

//Few scenarios and the desired result:
check_IsExternalUser_And_PendingStatusL3("76070",new Date("2022-12-01")); //The input box should be enable
check_IsExternalUser_And_PendingStatusL3("76070",new Date("2023-01-01")); //The input box should be enable
check_IsExternalUser_And_PendingStatusL3("76070",new Date("2023-06-01")); //The input box should be disable
check_IsExternalUser_And_PendingStatusL3("76070",new Date("2023-06-30")); //The input box should be disable
check_IsExternalUser_And_PendingStatusL3("76070",new Date("2023-07-01")); //The input box should be disable
check_IsExternalUser_And_PendingStatusL3("76070",new Date("2024-01-01")); //The input box should be disable

 

[FResher]

Html 5 have modern input for date,
which can be set with a 'high limit' Date, and a start Date condition : try it !
It's 'min' and 'max' attribute

read here, you'll understand :

<input type="date"> - HTML: HyperText Markup Language | MDN

<input> elements of type="date" create input fields that let the user enter a date. The appearance of the date picker input UI varies based on the browser and operating system. The value is normalized to the format yyyy-mm-dd.

developer.mozilla.org

 

[asifakhtar]

Html 5 have modern input for date,
which can be set with a 'high limit' Date, and a start Date condition : try it !
It's 'min' and 'max' attribute

read here, you'll understand :

<input type="date"> - HTML: HyperText Markup Language | MDN

<input> elements of type="date" create input fields that let the user enter a date. The appearance of the date picker input UI varies based on the browser and operating system. The value is normalized to the format yyyy-mm-dd.

developer.mozilla.org

I just want to make sure that my function will work in every scenario, which will make the input box disabled.

const check_IsExternalUser_And_PendingStatusL3 = (statusID = null, startDate = null) => {
return !!statusID && !!startDate ? (statusID === "76070" && ((new Date(startDate)).getMonth() === new Date().getMonth() || startDate > new Date())) : false;
};

 

[VBService]

Try in that way:

// Get today's date
var last_month = new Date();
var today = new Date();

// Set the date to the last day of last month
last_month.setMonth(last_month.getMonth(), 0);

// Get milliseconds
console.log(last_month.getTime());
console.log(today.getTime());

const check_IsExternalUser_And_PendingStatusL3  = (statusID = null, startDate = null) => {
  const last_month = new Date();
  last_month.setMonth(last_month.getMonth(), 0);
  return !(!!statusID && (last_month.getTime() >= startDate.getTime()));
}

Full demo: on-line

 

[VBService]

Try in that way:

// Get today's date
var last_month = new Date();
var today = new Date();

// Set the date to the last day of last month
last_month.setMonth(last_month.getMonth(), 0);

// Get milliseconds
console.log(last_month.getTime());
console.log(today.getTime());

const check_IsExternalUser_And_PendingStatusL3  = (statusID = null, startDate = null) => {
  const last_month = new Date();
  last_month.setMonth(last_month.getMonth(), 0);
  return !(!!statusID && (last_month.getTime() >= startDate.getTime()));
}

Full demo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input {
        display: block;
      }
      input + input {
        margin-top: .5em;
      }
    </style>
  </head>
  <body>

    <script>
      const globalPendingStatusIDL3 = "76070";

      const check_IsExternalUser_And_PendingStatusL3  = (statusID = null, startDate = null) => {
        const last_month = new Date();
        last_month.setMonth(last_month.getMonth(), 0);
        return !(!!statusID && (last_month.getTime() >= startDate.getTime()));
      }

      // Few scenarios and the desired result:
      const demo_date = [
        '2022-12-01', '2023-01-01', '2023-06-01', '2023-06-30', '2023-07-01', '2024-01-01'
      ];

      window.onload = load;

      function load() {
        const html = document.createDocumentFragment();

        for (const date_item of demo_date) {
          const input = document.createElement('input');
          input.value = date_item;
          input.disabled = check_IsExternalUser_And_PendingStatusL3(globalPendingStatusIDL3, new Date(date_item));
          html.appendChild(input);
        }

        document.body.appendChild(html); 
      }
    </script>
  </body>
</html>

 

[asifakhtar]

Try in that way:

// Get today's date
var last_month = new Date();
var today = new Date();

// Set the date to the last day of last month
last_month.setMonth(last_month.getMonth(), 0);

// Get milliseconds
console.log(last_month.getTime());
console.log(today.getTime());

const check_IsExternalUser_And_PendingStatusL3  = (statusID = null, startDate = null) => {
  const last_month = new Date();
  last_month.setMonth(last_month.getMonth(), 0);
  return !(!!statusID && (last_month.getTime() >= startDate.getTime()));
}

Full demo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input {
        display: block;
      }
      input + input {
        margin-top: .5em;
      }
    </style>
  </head>
  <body>

    <script>
      const globalPendingStatusIDL3 = "76070";

      const check_IsExternalUser_And_PendingStatusL3  = (statusID = null, startDate = null) => {
        const last_month = new Date();
        last_month.setMonth(last_month.getMonth(), 0);
        return !(!!statusID && (last_month.getTime() >= startDate.getTime()));
      }

      // Few scenarios and the desired result:
      const demo_date = [
        '2022-12-01', '2023-01-01', '2023-06-01', '2023-06-30', '2023-07-01', '2024-01-01'
      ];

      window.onload = load;

      function load() {
        const html = document.createDocumentFragment();

        for (const date_item of demo_date) {
          const input = document.createElement('input');
          input.value = date_item;
          input.disabled = check_IsExternalUser_And_PendingStatusL3(globalPendingStatusIDL3, new Date(date_item));
          html.appendChild(input);
        }

        document.body.appendChild(html);
      }
    </script>
  </body>
</html>

Txs. It works. Appreciated.