How to set current date as the min date on below code?-CodePudding

I want to set the current date as the min date without giving a fixed date like the below

 <input
      type="date"
      className="form-control"
      placeholder="Pick a date"
      name="closingDate" 
      min="2022-10-14"                      
      onChange={(e) => setClosingDate(e.target.value)}
       />

CodePudding user response：

try this...

<input
      type="date"
      className="form-control"
      placeholder="Pick a date"
      name="closingDate" 
      min={new Date().toJSON().slice(0, 10)}
      onChange={(e) => setClosingDate(e.target.value)}
       />

CodePudding user response：

How about setting as current date using toISOString

const App = () => {
  return (
    <input
      type="date"
      className="form-control"
      placeholder="Pick a date"
      name="closingDate"
      min={new Date().toISOString().split("T")[0]}
      // onChange={(e) => setClosingDate(e.target.value)}
    />
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

CodePudding user response：

You can just make a new date object and construct a min string from that. Please enjoy this react snippet demonstrating.

const { useState } = React;

const App = () => {
    const [ closingDate, setClosingDate ] = useState(null);

    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth()   1;
    const day = today.getDate();
    const minStr = [year, month, day].join("-");
    
    
    return (
        <div>
          Minimum date is { today.toLocaleString() } <br />
          Closing date is { closingDate } <br />
          <input 
            type="date"
            className="form-control"
            placeholder="Pick a date"
            name="closingDate" 
            min={minStr}                      
            onChange={(e) => setClosingDate(e.target.value)}
          />
        </div>
    );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

CodePudding user response：

<input
      type="date"
      className="form-control"
      placeholder="Pick a date"
      name="closingDate" 
      min= {new Date().toISOString().split('T')[0]}                     
      onChange={(e) => setClosingDate(e.target.value)}
       />

As you are using react js you can assign current date to min as above.New Date() can use to find current date including time (current timestamp). Then split it and used first part of it which is the date.