html+js+jquery+bootstrap实现日期选择和快速选择日期

一.前言

好久没有写文章了，最近在模仿10086网上营业厅来写项目，遇到了一些坑，这篇文章主要是记录和时间日期相关的前台界面。

二.最终结果展示

三.实现方法

1. 开始时间和截止时间的实现，效果如下图:
   

• 首先导入jquery和datetimepipicker

<%--引入jquery依赖--%>
    <script type="text/javascript" src="/js/jquery-3.3.1.js"></script>

    <%--引入bootstrap依赖--%>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    
<%--引用datetimepicker--%>
<script src="/js/time.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<%--中文引用--%>
<script type="text/javascript" src="/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<%--英文引用--%>
<%--<script type="text/javascript" src="/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>--%>

• 写开始和结束时间前台(我写了一些css代码，这里不粘贴出来

        <div class="row client-time-search">
            <%--<div class='col-sm-6'>--%>
            <div class="form-group width160">
                <%--<label>选择开始时间：</label>--%>
                <!--指定 date标记-->
                <div class='input-group date width160' id='startTime'>
                    <input id="startTimeInput" type='text' class="form-control" disabled/>
                    <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                </div>
            </div>
            <%--</div>--%>
            <span style="color: #c9c9c9;margin: 0 10px;float: left;line-height: 30px">—</span>
            <%--<div class='col-sm-6'>--%>
            <div class="form-group width160">
                <%--<label>选择结束时间：</label>--%>
                <!--指定 date标记-->
                <div class='input-group date width160' id='endTime'>
                    <input id="endTimeInput" type='text' class="form-control" disabled/>
                    <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                </div>
                <%--</div>--%>
            </div>
            <%--搜索按钮--%>
            <button type="button" class="btn btn-primary" style="margin-left: 15px" onclick="searchNote()"
                    id="searchNoteInfo">查询
            </button>
        </div>

• 给开始时间和结束时间设定范围，比如开始时间要小于结束时间，不能选超过当前时间的日期。网上找了很多种方法，只有这个方法可行。

 <%--时间段选择。
    超过当前当前时间不能选
    起始时间不能大于结束时间--%>
    $(function () {
        $('#startTime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            locale: moment.locale('zh-cn'),
            //minDate: '2016-7-1'
            autoclose: true,   //选择日期后自动关闭日期选择框
            todayHighlight: true,   //当天高亮显示
            endDate: new Date()
        }).on('changeDate', function (ev) {
            if (ev.date) {
                $('#endTime').datetimepicker('setStartDate', new Date(ev.date.valueOf()))
            } else {
                $('#endTime').datetimepicker('setStartDate', null);
            }
        }).val("开始时间");

        $('#endTime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            locale: moment.locale('zh-cn'),
            todayBtn: "true",  //显示今天按钮
            autoclose: true,   //选择日期后自动关闭日期选择框
            todayHighlight: true,   //当天高亮显示
            endDate: new Date()

        }).on('changeDate', function (ev) {
            console.log("333", ev.date.valueOf())
            //获取时间
            //这种方法获取到的时间是英文的
            console.log($("#startTime").data("datetimepicker").getDate());
            // 这种方法是获取输入框中的时间，是中文的
            console.log($("#endTime").find("input").val())
            if (ev.date) {
                $('#startTime').datetimepicker('setEndDate', new Date(ev.date.valueOf()))
            } else {
                $('#startTime').datetimepicker('setEndDate', new Date());
            }

        });

        console.log("1111")
        //动态设置最小值
        // picker1.on('changeDate', function (e) {
        //     $("#datetimepicker1").datetimepicker("setEndDate", $("#datetimepicker2").val());
        //
        // });
        // //动态设置最大值
        // picker2.on('changeDate', function (e) {
        //     $("#datetimepicker2").datetimepicker("setStartDate", $("#datetimepicker1").val());
        //
        // });

        //设置开始时间
        // $('#startTime').datepicker('setStartDate', new Date());
        // $('#endTime').datepicker('setStartDate', new Date());
        // $("#startTime").datepicker().on('changeDate', function(e) {
        //     //获取选取的开始时间
        //     var endTimeStart =$("#startTime").val();
        //     //设置结束时间
        //     $('#endTime').datepicker('setStartDate', endTimeStart);
        // });
        // //设置结束时间必须晚于开始时间
        // $("#endTime").datepicker().on('changeDate', function(e) {
        //     //获取选取的开始时间
        //     var endTimeStart =$("#startTime").val();
        //     //设置结束时间
        //     $('#endTime').datepicker('setStartDate', endTimeStart);
        // });
    });

2. 设置点击今天 最近一个月等按钮就能够实现把日期加入到开始时间和结束时间的输入框中。效果如下图:
   

• 首先给今天 最近一个月等按钮设置点击事件。

 <button type="button" class="btn btn-link client-search-item" onclick="setToday()">今天</button>
            <button type="button" class="btn btn-link client-search-item" onclick="setOneMonth()">最近1个月</button>
            <button type="button" class="btn btn-link client-search-item" onclick="setThreeMonth()">最近3个月</button>
            <button type="button" class="btn btn-link client-search-item" onclick="setSixMonth()">最近6个月</button>
            <button type="button" class="btn btn-link client-search-item" onclick="setOneYear()">最近一年</button>

• 然后实现点击事件，把时间赋值给输入框。

   /**
     * 查询今天
     */
    function setToday() {
        var date = new Date();
       var currentTime = dateTran("yyyy-MM-dd",date);
        alert(currentTime);
        $('#startTimeInput').val(currentTime);
        $('#endTimeInput').val(currentTime);
    }

    /**
     * 查询最近一个月
     */
    function setOneMonth() {
        var date = new Date();
        // 结束时间
        var endTime = dateTran("yyyy-MM-dd", date);
        // 前一天
        // date.setTime(date.getTime()-(1000*60*60*24));
        // 最近一个月，所以减1
        date.setMonth(date.getMonth()-1);
        var startTime = dateTran("yyyy-MM-dd",date);
        $('#startTimeInput').val(startTime);
        $('#endTimeInput').val(endTime);

    }

$(’#endTimeInput’).val(endTime)相当于把id=endTimeInput的输入框内赋值endTime。

• 类似于Java的时间转换类simpledateformat我没有找到,因此参考网上的写了一个类似的。

/**
     * 时间转换
     * @param format
     * @param time
     * @returns {void | string | *}
     */
    function dateTran(format, time) {
        var t = new Date(time);
        //将不住两位的在前面加零
        var tf = function (i) {
            return (i < 10 ? '0' : '') + i
        };
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
            switch (a) {
                case 'yyyy':
                    return tf(t.getFullYear());
                    break;
                case 'MM':
                    return tf(t.getMonth() + 1);
                    break;
                case 'mm':
                    return tf(t.getMinutes());
                    break;
                case 'dd':
                    return tf(t.getDate());
                    break;
                case 'HH':
                    return tf(t.getHours());
                    break;
                case 'ss':
                    return tf(t.getSeconds());
                    break;
            }
        })
    }

通过调用上诉代码就能转换成自己想要的格式了。

---

四.总结

以上就是我这几天写这个功能前台所踩的坑和实现方法，希望对你有帮助。

---

永远不要相信老板给你描绘的公司愿景和蓝图，因为你不是股东之一，没有任何理由知道。
永远不要相信老板会出于善心给你加薪，他只会告诉你你应该学的更多，肩负更多的责任。
做好自己的分内事，并且要越做越好。这样的坚持和努力不是为了公司、不是为了老板，而是为了自己，为了自己的所长越来越专业。

---

完