想在 Angular 中实现 jquery-ui-daterangepicker

Question

嗨朋友我想在我的应用程序中使用 jquery ui datepicker 插件 我正在使用http://tamble.github.io/jquery-ui-daterangepicker/ 这个插件并且想要相同的功能而不做任何改变 我已经尝试过类似下面的代码

(function(){
angular.module('publisher-portal').directive('dateRangePicker', function () {
    return {
         restrict : 'A',
         require: 'ngModel',
         link : function (scope, element, attr, ngModel) {

            element.daterangepicker();
         }
    };
});
})();
<input id="e2" type="text" ng-model="mydate" dateRangePicker/>  

请给我一些解决方案

Answer 1

这是一个有效的 sn-p（仔细查看我如何确保在调用 .daterangepiker 之前加载 jQuery

更多的人认为你在路上错过了

1. 安装模块后忘记放空数组app.module('publisher-portal',[])
2. 您没有扭曲 $() 语句中的元素

(function($){
angular.module('publisher-portal',[]).directive('dateRangePicker', function () {
    return {
         restrict : 'A',
         require: 'ngModel',
         link : function (scope, element, attr, ngModel) {

            $(element).daterangepicker();
         }
    };
});
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/2.3.1/moment.min.js"></script>
<script src="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/assets/css/styles.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/prettify/prettify.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.css">
<div ng-app='publisher-portal'>

<input id="e2" type="text" ng-model="mydate" date-range-picker /> 
  </div>

Answer 2

查看这个纯 Angular（不需要 jquery）日期范围选择器。 https://github.com/tawani/taDateRangePicker