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, either with a textbox that validates the input or a special date picker interface.

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, either with a textbox that validates the input or a special date picker interface.

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.