前端选择时间范围关联日期快速查询

效果图

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>