angular 1使用日期范围插angular-daterangepicker/ bootstrap-daterangepicker

现在公司有一个很老的项目,采用的还是angular1的版本实现的,想要实现某个插件需求,就需要去网上各种搜索,这不就是有一个需求要实现日期范围插件,最终选择了angular-daterangepicker一套的插件(其实主要是bootstrap-daterangepicker插件),下面是该插件的一些用法理解:(我是一个angular小白,只是学框架的时候看过一点angular,有错误的地方请大家指正)

  1. 使用bower安装插件,这里会安装angular-daterangepicker,bootstrap-daterangepicker和moment
bower install angular-daterangepicker --save
  1. 在入口文件index.html中加入如下链接
    <script src="bower_components/moment/moment.js"></script>
    <script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.min.js"></script>
    <script src="bower_components/bootstrap-daterangepicker/moment.min.js"></script>

	<link href="bower_components/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

ps: 在这里要注意js的引入顺序,可能顺序不同,会导致后面使用daterangepicker初始化插件的时候提示daterangepicker is not a function 的错误。

  1. 声明daterangepicker的依赖
var omApp = angular.module('omniMediaApp', [
    'daterangepicker',
]);
  1. 在html文件中实现该插件
<input id="banan-datePicker"  class="form-control date-picker " type="text" ng-model="datePicker.date" />
  1. 在controller中初始化该插件
const locale = {
            'format': 'YYYY-MM-DD',
            'separator': ' - ',
            'applyLabel': '确定',
            'cancelLabel': '取消',
            'fromLabel': '起始时间',
            'toLabel': '结束时间',
            'customRangeLabel': '自定义',
            'weekLabel': 'W',
            'daysOfWeek': ['日', '一', '二', '三', '四', '五', '六'],
            'monthNames': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            'firstDay': 1
          };
       const options = {
            locale:locale,
            startDate: formatDate(new Date()),
            endDate: formatDate(new Date())
        }

        $scope.datePicker = {
            startDate: '',
            endDate: ''
        }
        /**
         * @description: 格式化时间
         * @param {*} date JavaScript日期格式
         */
        function formatDate(date) {
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            month = month < 10 ? ('0' + month) : month
            let day = date.getDate()
            day = day < 10 ? ('0' + day) : day
            return year + '-' + month + '-' + day
        }
		function initDatePicker() {
            $timeout(() => {
                $('#banan-datePicker').daterangepicker(options, (start, end) => {
                    console.log(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
                    $scope.datePicker.startDate = start.format('YYYY-MM-DD')
                    $scope.datePicker.endDate = end.format('YYYY-MM-DD')
                    getChannelData()
                })
            }, 10)
        }
        initDatePicker()

其中options的配置项可看这里
至于这里为何采用延时加载的方法去实现,主要是直接实例化该插件好像没有效果,通过给input绑定一个click事件,实现如下代码:

	$scope.initDateRangePicker = function() {
		$('#banan-datePicker').daterangepicker(options, (start, end) => {
           console.log(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
       }).click()
	}
	

这样的写法会出现一个问题,就是打开日历插件会默认点击一下apply,然后angular会出现$.apply已经在progress中的错误,查阅数据,也没能解决,还有一点需要主要的是,不在后面加上click(),会导致插件一闪就关闭了,也暂时没有分析出什么原因,最后也就舍弃了这种写法,有知道的大佬可以说说为啥吗?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值