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

Question

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 ?

I see you have provided the design, but where is your attempt at getting it to work? — imvain2, Apr 13 '23 at 20:35
do you want to change the format in UI https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format — cmgchess, Apr 13 '23 at 21:09
I'm recommending to close the question. SO isn't a code writing service and no attempt is being made to learn or try it out. — imvain2, Apr 13 '23 at 21:14
@imvain2 I have tired change the format in html tag in UI it did not work ,that's why I ask a JavaScript solution — William, Apr 13 '23 at 21:15
@imvain2 if you don't have any insight or idea ,please just ignore this question ,thanks — William, Apr 13 '23 at 21:16

score 2 · Accepted Answer · answered Apr 13 '23 at 21:58

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>

score 1 · Answer 2 · answered Apr 13 '23 at 21:23

Base on this idea, You can try this:

document.querySelector('#effective-date').addEventListener('change',(e)=>{
  let date = new Date(e.target.value);
  date = (new Date(new Date(date.setMonth(date.getMonth() + 1)).setDate(0))).toJSON().split('T')[0];
  console.log(date);
});

<!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" />
        <span class="bar"></span>
      </div>
    </div>
  </body>
</html>

score 1 · Answer 3 · answered Apr 14 '23 at 07:56

Unfortunately it's not possible to change the visual representation of the date. This is determined by the locale of your system. Though the output will always be the same (ISO 8601) format.

You can read the value of the date input as a Date object with the valueAsDate property. This object can be manipulated. Add 1 to the current month and set the current date to 0. The value 1 would represent the first date of the month, 0 represents one day less, which is the last day of the previous month.

const input = document.querySelector('#effective-date');
const output = document.querySelector('#actual-date');

input.addEventListener('input', event => {
  const date = event.target.valueAsDate;
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  output.value = date.toISOString();
});

<label for="effective-date">Effective Date</label>
<input id="effective-date" type="date" name="effective-date" required />

<label for="actual-date">The Actual Date</label>
<output id="actual-date"></output>

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

3 Answers3

Linked