angularjs使用插件daterangepicker創建日曆

1.js路由文件下添加頁面css文件路徑

var ApplylistState = {
            name: "CMS.apply.IssueApplyInfo",
            url: '/IssueApplyInfo',
            views: {
                '[email protected]': angularAMD.route({
                    templateUrl:  'IssueApplyInfo/IssueApplyInfo.html',
                    controller: 'CMS.IssueApplyInfo.IssueApplyInfoCtrl',
                    controllerUrl:  'IssueApplyInfo/IssueApplyInfoCtrl',
                    //設置css文件路徑
                    css: './../../calendar/daterangepicker.css'
                })
            }
        };

2.頁面controller文件下增加js文件引用

'./../../calendar/angular',
'./../../calendar/angular-locale_zh-cn',
'./../../calendar/ui-bootstrap-tpls-0.9.0',

3.頁面加入div設計

<div style="width:300px;height:100px;border:1px solid red;margin:100px auto;">
    <div class="input-group">
        <input placeholder="開始時間" type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="listFilter" is-open ="opened" datepicker-options="dateOptions" close-text="關閉" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-defalut" ng-click="open($event)">開始</button>
        </span>
    </div><br/>
    <div><button class="btn btn-success btn-block" ng-click="print()">打印選擇的時間</button></div>
</div> 

參考：https://blog.csdn.net/take_dream_as_horse/article/details/53695514
參考發現報錯getfullyear-is-not-a-function問題解決：

https://stackoverflow.com/questions/4929382/javascript-getfullyear-is-not-a-function
解決方法，修改

///設置日曆默認選中哪天
scope.listFilter= "2016-12-16";

爲

///設置日曆默認選中當前時間
scope.listFilter= new Date();
             

修改後頁面controller文件下增加：

///設置日曆默認選中哪天
                     scope.listFilter= new Date("2016-12-16");
 
                     ////日曆初始化選項
                     scope.dateOptions = {
                         formatYear: 'yy',
                         startingDay: 1,
                         //可以設置大於今天的日期不可選
                         maxDate:new Date()
                     };
 
                     ///選擇按鈕
                     scope.open = function($event) {
                         $event.preventDefault();
                         $event.stopPropagation();
                         scope.opened = true;
                     };
                     ////設置input日曆格式
                     scope.formats = ['yyyy-MM-dd', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                     scope.format = scope.formats[0];

                     ///設置今天按鈕
                     scope.today = function() {
                         scope.dt = new Date();
                     };
                     scope.today();
 
                     ///設置清除按鈕
                     scope.clear = function() {
                         scope.dt = null;
                     };

                     //打印時間
                     scope.print=function(){
                         //初始化選擇的時間
                         var d=new Date(scope.listFilter);
                         //如果天數小於10號，則在前面加0
                         var day=d.getDate()
                         if(day < 10){
                             day='0'+day;
                         }
                         var time=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + day;
                         console.log(time); 
                     }