Question

0

72

Views

Is there a way to output the long date from javascript datapicker

In this date-picker, after selecting a date from the calendar, the selected date is outputted in the format dd-mm-yy, is there a way to output the date in the long format(Monday 21 February 2022.) There source of this date-picker is: https://code-boxx.com/simple-datepicker-pure-javascript-css/#sec-download

  // CHOOSE A DATE
  pick : (id, day) => {
    // (C1) GET MONTH YEAR
    let inst = picker.instances[id],
        month = inst.hMonth.value,
        year = inst.hYear.value;

    // FORMAT & SET SELECTED DAY (DD-MM-YYYY)
    if (+month<10) { month = "0" + month; }
    if (+day<10) { day = "0" + day; }
    inst.target.value = `${day}-${month}-${year}`;

   //  POPUP ONLY - CLOSE
  if (inst.container === undefined) {
    inst.hWrap.classList.remove("show");
  }
    // CALL ON PICK IF DEFINED
    if (inst.onpick) { inst.onpick(); }
  }
};

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T23:40:39.378Z

The date picker value will be in the format yyyy-MM-dd, you can parse this (using String.split() and pass the year, month and day to the Date() constructor.

We can then use Date.toLocaleString() to output the correct format:

function dateChanged() {
    const dt = getDatePickerDate('date-input');
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    document.getElementById('output').innerHTML = dt.toLocaleDateString([], options);
}

function getDatePickerDate(elementId) {
    const value = document.getElementById(elementId).value
    const [year, month, day] = value.split('-');
    return new Date(year, month - 1, day);
}

<input id='date-input' type="date" value="2022-02-21" onchange='dateChanged()'>
<p id='output'></p>