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

悠悠 2022-11-15 07:04 248阅读 0赞

现在公司有一个很老的项目，采用的还是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的配置项可看[这里][Link 1]  
至于这里为何采用延时加载的方法去实现，主要是直接实例化该插件好像没有效果，通过给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()，会导致插件一闪就关闭了，也暂时没有分析出什么原因，最后也就舍弃了这种写法，有知道的大佬可以说说为啥吗？

[Link 1]: http://bsify.admui.com/daterangepicker/?id=%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关【Angular1】$filter的使用

AngularJS 过滤器 1. 在模板中使用filter 我们可以直接在\{ \{\}\}中使用filter，跟在表达式后面用 | 分割，语法如下：

忘是亡心i/ 2023年11月26日 00:43/ 0 赞/ 164 阅读

相关日期的转换（任意日期范围转换成季度范围）

任意日期范围转换成季度范围 public class aa { public static String year(i

左手的ㄟ右手/ 2023年10月05日 23:17/ 0 赞/ 53 阅读

相关 mx-date-picker Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）

Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）日期时间选择器 DatePicker 介绍一款高颜值、多场景的

╰半橙微兮°/ 2023年08月17日 16:44/ 0 赞/ 194 阅读

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

现在公司有一个很老的项目，采用的还是angular1的版本实现的，想要实现某个插件需求，就需要去网上各种搜索，这不就是有一个需求要实现日期范围插件，最终选择了angular-d

悠悠/ 2022年11月15日 07:04/ 0 赞/ 249 阅读

相关日期范围 java_java – 日期范围中的日期范围

实际上这个任务对我来说似乎很容易,但我有点卡住了,并会感谢一些提示：D 我有一些开始和结束时间的事件 – 我想创建一个包含日历周的表格. 因此,我写了一个方法来检查一个事件

灰太狼/ 2022年11月06日 08:59/ 0 赞/ 251 阅读

相关 angular js 格式化日期

1、AngularJs的controller中格式： var dateAsString = $filter('date')(item\_date, "yyyy-MM-dd

╰半橙微兮°/ 2022年06月17日 13:48/ 0 赞/ 268 阅读

相关 JQuery日历插件My97DatePicker日期范围限制

My97DatePicker是一个非常优秀的日历插件，不仅支持多种调用模式，还支持日期范围限制。常规的调用比较简单，如下所示： <table> <tbody>

拼搏现实的明天。/ 2022年05月31日 09:15/ 0 赞/ 337 阅读

相关 Angular 的 UEditor 插件 Angular-UEditor

Angular-UEditor 详细介绍 [Angualr][] 作为最近前端大热的一款框架，越来越多国人开始使用并且不断有成功的项目。UEditor作为百度前端团队的一款神

梦里梦外;/ 2022年05月20日 08:35/ 0 赞/ 287 阅读

相关 WdatePicker设置日期范围和使用

转载学习，自己用 <div style="float:left"> <span class="input\_span\_s">月份

曾经终败给现在/ 2022年03月12日 13:22/ 0 赞/ 650 阅读

相关 angular6中使用树形插件

效果图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

谁借莪１个温暖的怀抱￠/ 2022年01月06日 12:27/ 0 赞/ 393 阅读