效果图
html部分
<div class="select-list">
<ul>
<li>
<label>时间:</label>
<select id="timeInterval">
<option value="1">自定义</option>
<option value="2">当天</option>
<option value="3">本周</option>
<option value="4">本月</option>
<option value="5">本年</option>
</select>
</li>
<li class="select-time">
<label>查询日期: </label>
<input type="text" class="time-input" placeholder="开始日期"
name="params[beginTime]"/>
<span>-</span>
<input type="text" class="time-input" placeholder="结束日期"
name="params[endTime]"/>
</li>
</ul>
</div>
js部分
<script type="text/javascript">
timeInterval.addEventListener('change', function() {
switch (timeInterval.value) {
case "1":
beginDateInput.value = "";
endDateInput.value = "";
break;
case "2":
beginDateInput.value = formatDate(today);
endDateInput.value = formatDate(today);
break;
case "3":
var firstDayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek + 1);
var lastDayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek + 7);
beginDateInput.value = formatDate(firstDayOfWeek);
endDateInput.value = formatDate(lastDayOfWeek);
break;
case "4":
var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
var lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
beginDateInput.value = formatDate(firstDayOfMonth);
endDateInput.value = formatDate(lastDayOfMonth);
break;
case "5":
var firstDayOfYear = new Date(today.getFullYear(), 0, 1);
var lastDayOfYear = new Date(today.getFullYear(), 11, 31);
beginDateInput.value = formatDate(firstDayOfYear);
endDateInput.value = formatDate(lastDayOfYear);
break;
}
});
function formatDate(date) {
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
return year + "-" + month + "-" + day;
}
</script>