<select id="selectedDate" onchange="setPeriod(event)">
<option value="">전체기간</option>
<option value="1">1개월 전</option>
<option value="3">3개월 전</option>
<option value="6">6개월 전</option>
</select>
<input type="date" id="start" >
<p id="printDate"></p>
function leftPad(value) {
if (value >= 10) {
return value;
}
return `0${value}`;
}
const toStringByFormatting = (source, delimiter) => {
const year = source.getFullYear();
const month = leftPad(source.getMonth() + 1);
const day = leftPad(source.getDate());
return [year, month, day].join(delimiter);
};
const dateControl = document.querySelector('input[type="date"]');
dateControl.valueAsDate = new Date();
const setPeriod = (e) =>{
let period = e.target.value
dateControl.valueAsDate = new Date(new Date().setMonth(new Date().getMonth() - period));
const settedDate = dateControl.value;
document.querySelector('#printDate').innerHTML = settedDate + " ____ " + toStringByFormatting(new Date(settedDate), "/") + " ____ " + toStringByFormatting(new Date(settedDate), "♥");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.