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

最新推荐文章于 2024-08-22 09:20:35 发布

0110_1024

最新推荐文章于 2024-08-22 09:20:35 发布

阅读量448

点赞数

分类专栏： angular 文章标签： daterangepicker angular bootstrap 日期范围插件

本文链接：https://blog.csdn.net/weixin_43777074/article/details/115349064

版权

angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

使用bower安装插件，这里会安装angular-daterangepicker，bootstrap-daterangepicker和moment

bower install angular-daterangepicker --save

在入口文件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 的错误。

声明daterangepicker的依赖

var omApp = angular.module('omniMediaApp', [
    'daterangepicker',
]);

在html文件中实现该插件

<input id="banan-datePicker"  class="form-control date-picker " type="text" ng-model="datePicker.date" />

在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()，会导致插件一闪就关闭了，也暂时没有分析出什么原因，最后也就舍弃了这种写法，有知道的大佬可以说说为啥吗？