第20篇：基于bootstrap-datatimepicker带时间段的选择 （与multiselect搭配使用，与angular搭配使用）

1.文件引入

<link rel="stylesheet" href="lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-multi-select/css/multiple-select.css">
<script type="text/javascript" src="lib/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="lib/angular/angular-1.3.0.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-multi-select/js/multiple-select.js"></script>
<script type="text/javascript" src="lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

2.HTML代码（视图页面）

<li>
                <label for="period">Period</label>
                <select size="2" id="period" select-no-search>
                    <option value="Today" selected>Today</option>
                    <option value="Yesterday">Yesterday</option>
                    <option value="Last 7 Days">Last 7 Days</option>
                    <option value="This Month">This Month</option>
                </select>
            </li>
            <li>
                <label for="start">Start Time</label>
                <input type="text" id="start" class="s-input150 s-bgCalendar d-startTime" on-focus ng-init="getTime()" ng-model="startTime" readonly>
            </li>
            <li>
                <label for="end">End Time</label>
                <input type="text" id="end" class="s-input150 s-bgCalendar d-endTime" on-focus ng-init="getTime()" ng-model="endTime" readonly>
</li>

3.函数封装

3.1 时间戳转换为时间：

$rootScope.unix_to_datetime = function(unix,x) {
        var date = new Date(unix);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
        h = date.getHours() < 10 ? '0' + date.getHours()  + ':' : date.getHours() + ':';
        m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        if(x === 1){return (Y+M+D+h+m);}//2017-09-29 21:30
        if(x === 4){return (Y+M+D+h+"00");}//2017-09-29 21:00
        if(x === 2){return (Y+M+D+"00"+":"+"00");}//2019-09-29 00:00
        if(x === 3){return (Y+M+D);}//2019-09-29
        if(x === 5){return (Y+M+"01");}//2019-09-01
    };

3.2 时间段选择器封装：

$rootScope.datePicker = function(beginSelector, endSelector,minView,format){
        $(beginSelector).datetimepicker({
            minView: minView,
            autoclose: true,
            todayBtn: true,
            format: format
        }).on('changeDate', function(ev) {
            if (ev.date) {
                $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()));
            } else {
                $(endSelector).datetimepicker('setStartDate', null);
            }
        });
        $(endSelector).datetimepicker({
            minView: minView,
            autoclose: true,
            todayBtn: true,
            format: format
        }).on('changeDate', function(ev) {
            if (ev.date) {
                $(beginSelector).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
            } else {
                $(beginSelector).datetimepicker('setEndDate', new Date());
            }
        });
    };

4.在对应控制器中的使用

$scope.getTime = function(){
        $scope.temp = Math.round(new Date().getTime());
        $scope.endTime =$scope.startTime = $rootScope.unix_to_datetime($scope.temp, 3);
        $rootScope.datePicker(".d-startTime", ".d-endTime", "month", "yyyy-mm-dd");
    };
    $('#period').change(function () {
        if($(this).val() == 'Today'){
            $('.d-startTime').val($rootScope.unix_to_datetime(temp,3));
            $('.d-endTime').val($rootScope.unix_to_datetime(temp,3));
        };
        if($(this).val() == 'Yesterday'){
            $('.d-startTime').val($rootScope.unix_to_datetime(temp - 86400*1000,3));
            $('.d-endTime').val($rootScope.unix_to_datetime(temp - 86400*1000,3));
        };
        if($(this).val() == 'Last 7 Days'){
            $('.d-startTime').val($rootScope.unix_to_datetime(temp - 86400*1000*7,3));
            $('.d-endTime').val($rootScope.unix_to_datetime(temp,3));
        };
        if($(this).val() == 'This Month'){
            $('.d-startTime').val($rootScope.unix_to_datetime(temp,5));
            $('.d-endTime').val($rootScope.unix_to_datetime(temp,3));
        };
    });

5.效果展示