En este selector de fechas, después de seleccionar una fecha del calendario, la fecha seleccionada se genera en el formato dd-mm-yy, ¿hay alguna manera de generar la fecha en el formato largo (lunes 21 de febrero de 2022). Hay fuente de este selector de fecha es: 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(); } } };
El valor del selector de fecha tendrá el formato yyyy-MM-dd
, puede analizarlo (usando String.split()
y pasar el año, el mes y el día al constructor Date().
Luego podemos usar Date.toLocaleString()
para generar el formato correcto:
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>