angularjsプラグインdaterangepickerを使用してカレンダーを作成する

3621 ワード

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設計を加える


参照先:https://blog.csdn.net/take_dream_as_horse/article/details/536995514参照エラーgetfullyer-is-not-a-function問題解決:
https://stackoverflow.com/questions/4929382/javascript-getfullyear-is-not-a-function 解決方法、修正

///          
scope.listFilter= "2016-12-16";

を選択します.
///            
scope.listFilter= new Date();
             

変更後のページコントロールファイルの下に追加:
///          
                     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); 
                     }