<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), "♥");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.