angular-daterangepicker, dangrossman/Bootstrap daterangepicker的angular.js 包装器

分享于 

7分钟阅读

GitHub

  繁體 雙語
Angular.js wrapper for dangrossman/bootstrap-daterangepicker
  • 源代码名称:angular-daterangepicker
  • 源代码网址:http://www.github.com/fragaria/angular-daterangepicker
  • angular-daterangepicker源代码文档
  • angular-daterangepicker源代码下载
  • Git URL:
    git://www.github.com/fragaria/angular-daterangepicker.git
    Git Clone代码到本地:
    git clone http://www.github.com/fragaria/angular-daterangepicker
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/fragaria/angular-daterangepicker
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    用于 Angular 和 Bootstrap的日期范围选取器

    Dependencies

    grossmans Bootstrap Datepicker的Dan 的Angular.js 指令。

    维护者需要 !

    你好,你可能注意到,维护这个 repo 有困难。 因此,如果有人愿意帮助合并 PRs,测试和释放,请与我联系 lukas。Marek ( at ) fragaria。 谢谢!

    演示工具

    注意:注意:使用 Bootstrap Datepicker v ! 版本较早版本的datepicker支持 0.1.17版本

    Date Range Picker screenshot

    通过 Bower 安装

    安装选取器的最简单方法是:

    
    bower install angular-daterangepicker --save
    
    
    
    

    手动安装

    这个指令依赖于 Bootstrap DatepickerBootstrap,Moment.js 和jQuery。 下载依赖项 上面,然后使用压缩或者正常版本。

    基本用法

    假设 Bower 安装目录是 bower_components。 在其他安装目录中,请相应更新路径。

    
    <script src="bower_components/jquery/jquery.js"></script>
    
    
    <script src="bower_components/angular/angular.js"></script>
    
    
    <script src="bower_components/momentjs/moment.js"></script>
    
    
    <script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
    
    
    <script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
    
    
    
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
    
    
    <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
    
    
    
    

    声明依赖关系:

    
    App = angular.module('app', ['daterangepicker']);
    
    
    
    

    在控制器中准备模型。 模型必须具有和 endDate 属性:

    
    exampleApp.controller('TestCtrl', function ($scope) {
    
    
     $scope.datePicker.date = {startDate: null, endDate: null};
    
    
    }
    
    
    
    

    然后在HTML中只添加属性 date-range-picker 到任何输入并将它的绑定到模型。

    
    <div ng-controller="TestCtrl">
    
    
    <input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date"/>
    
    
    </div>
    
    
    
    

    有关工作演示,请参阅 example.html

    请注意点

    不要忘了在模型对象中添加点(。),以避免在范围继承问题中出现问题。 比如 使用 $scope.datePicker.date 而不是 $scope.date

    高级用法

    最小值和最大值可以通过附加属性设置:

    
    <input date-range-picker class="form-control date-picker" type="text" ng-model="date" min="'2014-02-23'" max="'2015-02-25'"/>
    
    
    
    

    可以通过传入 options 属性进一步定制日期选取器。

    
    <input date-range-picker class="form-control date-picker" type="text" ng-model="date"
    
    
    min="'2014-02-23'" max="'2015-02-25'" options="{locale: {separator:":"}}"/>
    
    
    
    

    示例选项

    
    $scope.options = {
    
    
     applyClass: 'btn-green',
    
    
     locale: {
    
    
     applyLabel:"Apply",
    
    
     fromLabel:"From",
    
    
     format:"YYYY-MM-DD",//will give you 2017-01-06
    
    
    //format:"D-MMM-YY",//will give you 6-Jan-17
    
    
    //format:"D-MMMM-YY",//will give you 6-January-17
    
    
     toLabel:"To",
    
    
     cancelLabel: 'Cancel',
    
    
     customRangeLabel: 'Custom range'
    
    
     },
    
    
     ranges: {
    
    
     'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    
    
     'Last 30 Days': [moment().subtract(29, 'days'), moment()]
    
    
     }
    
    
     }
    
    
    
    

    可以选择通过 optionseventHandlers 属性来传递事件处理程序。

    
    <input date-range-picker class="form-control date-picker" type="text" ng-model="date"
    
    
    options="{eventHandlers: {'show.daterangepicker': function(ev, picker) {.. . }}}"/>
    
    
    
    

    支持来自 Bootstrap daterangepicker的所有事件处理程序。 作为参考,下面列出了完整的列表:

    show.daterangepicker: 显示选取器时触发

    hide.daterangepicker: 在隐藏器隐藏时触发

    showCalendar.daterangepicker: 在显示日历时触发

    hideCalendar.daterangepicker: 在隐藏日历时触发

    apply.daterangepicker: 单击应用按钮时触发

    cancel.daterangepicker: 单击取消按钮时触发

    兼容性

    版本> 0.2.0需要 Bootstrap Datepicker 2.0.0和更新版本。 版本> 0.1.1需要 Bootstrap Datepicker 1.3.3和更新版本。

    链接

    请参阅原始文档文档。

    问题和请求请求

    PRs are welcome - 谢谢你。

    请将 *.coffee 代码发送给我。 ,请不要包含Javascript和 minified Javascript。 Javascript和minified将在发布之前使用 grunt dist 命令生成。

    Throughput Graph

    贡献者

    请参见 CONTRIBUTORS.md,为所有贡献这里 repo的伟大人员提供了帮助 ! 谢谢大家 !


    相关文章