angularjs使用插件daterangepicker创建日历

1.js路由文件下添加页面css文件路径

var ApplylistState = {
            name: "CMS.apply.IssueApplyInfo",
            url: '/IssueApplyInfo',
            views: {
                'main@CMS.apply': 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); 
                     }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值