JavaScript to to change input type="date" format and value

This question may be a bit challenging :

How to use JavaScript to change input type="date" format to :YYYY-MM-DD and no matter which date the user chooses ,the date need always be converted to the last day of the Month.

For example if the user choose 2023-06-01 ,then in the final the date should be :

2023-06-30

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <style media="screen">
  .form-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 3rem;
    min-height: 3rem;
  }
  .form-question__title {
    color: #342357;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .input-container {
    border-bottom: solid 2px #333333;
  }
  .input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    width: 100%;
  }
  </style>
  <body>
    <div class="form-question">
      <div class="form-question__title">
        <span>Effective Date</span>
      </div>
      <div class="input-container">
        <input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input>
        <span class="bar"></span>
      </div>
    </div>
  </body>
</html>

Any friend can help ?

Solution

To get the last day of the month you can pass the next month, with day 0 to Date() it should roll back to the last day of previous month. To to format the date you can use toLocaleDateString with Swedish locale. To display it in UI, you can make an overlay span that covers original input.

const el = document.getElementById('effective-date');
const displayEl = document.querySelector('.date-display');

el.addEventListener('input', function(event) {
  const selectedDate = new Date(el.value);
  const lastDayDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  const formattedDate = lastDayDate.toLocaleDateString('se-SE', options);
  displayEl.textContent = formattedDate;
});

  .form-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 3rem;
    min-height: 3rem;
  }
  .form-question__title {
    color: #342357;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .input-container {
    border-bottom: solid 2px #333333;
  }
  .input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    width: 100%;
  }

.date-container{
  position:relative;
}
.date-display{
  font-family:sans-serif;
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  font-size:12px;
  line-height:12px;
  padding:15px 5px;
  width:calc(100% - 50px);
 background:white;
}

<div class="form-question">
  <div class="form-question__title">
    <span>Effective Date</span>
  </div>
  <div class="input-container">
    <div class="date-container">
      <input id="effective-date" class="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required">
      <span class="date-display">YYYY-MM-DD</span>
    </div>
    <span class="bar"></span>
  </div>
</div>