在這個日期選擇器中,從日歷中選擇一個日期后,選擇的日期以 dd-mm-yy 格式輸出,有沒有辦法以長格式輸出日期(2022 年 2 月 21 日星期一)。這個日期選擇器是: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(); }
}
};
uj5u.com熱心網友回復:
日期選擇器值將采用 format yyyy-MM-dd,您可以對其進行決議(使用String.split()并將年、月和日傳遞給 Date() 建構式。
然后我們可以使用Date.toLocaleString()輸出正確的格式:
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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/431165.html
標籤:javascript html 日期 日期选择器
