Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    ng-bs-daterangepicker-pluspublic

    ng-bs-daterangepicker

    Angular directive for Dan Grossman's bootstrap-daterangepicker.

    This is a fork of original Luis Farzati's version with a couple of incompatible fixes and localization feature.

    Demo: http://kojoru.github.io/ng-bs-daterangepicker

    Installation

    Using bower:

    bower install ng-bs-daterangepicker-plus
    

    Using npm:

    npm install ng-bs-daterangepicker-plus
    

    How to use it

    You should already have a bunch of scripts and CSS required for bootstrap-daterangepicker:

    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="moment.min.js"></script>
    <script type="text/javascript" src="daterangepicker.js"></script>
    <script type="text/javascript" src="angular.min.js"></script>
    

    to the list above, you should add:

    <script type="text/javascript" src="ng-bs-daterangepicker.js"></script>
    

    Then, inject ngBootstrap.dateRangePicker in your application module:

    angular.module('myApp', ['ngBootstrap.dateRangePicker']);
    

    and then just add any element of type daterange:

    <input ng-daterange type="daterange" ng-model="myDateRange">
    

    The result object $scope.myDateRange has a startDate and endDate properties, which are instances of moment().

    Implemented features so far

    • startDate, endDate: are taken from the ng-model object;
    • minDate, maxDate: mapped from min-date and max-date attributes;
    • dateLimit: mapped from limit attribute;
    • format: mapped from format attribute;
    • separator: mapped from separator attribute.
    • ranges: mapped from ranges attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)
    • locale: mapped from locale attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)

    Example with all above features:

    <input
        ng-daterange 
        type="daterange"
        ng-model="dates"
        min-date="2013-09-10"
        max-date="2013-09-25"
        limit="3 days"
        format="L"
        separator="/"
        ranges="{'Special Range':{'startDate': '2013-09-2', 'endDate': '2013-09-5'}}">
    

    The limit attribute lets you specify a number and unit similarly as you would invoke moment.duration().

    Features to be implemented:

    • timePicker*
    • show*
    • other formatting options like *Class and stuff

    Build

    You can run the tests by running

    npm install
    bower install
    grunt
    

    assuming you already have grunt installed, otherwise you also need to do:

    npm install -g grunt-cli
    

    Keywords

    none

    install

    npm i ng-bs-daterangepicker-plus

    Downloadsweekly downloads

    4

    version

    0.1.0

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar