Question 42727 in Html Question posted in
Some basic documentation can be found here.

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

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 ?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search