Have ideas to improve npm?Join in the discussion! »

    mw-datepicker-range

    1.1.0 • Public • Published

    mw-datepicker-range

    mw-datepicker-range is a AngularJS module that extend the ui-bootstrap's datepicker directive to allow a selection of a range.

    Requirements (tested in)

    • Angular (v1.6.4)
    • Bootstrap (v3.3.7)
    • ui-bootstrap (v2.5.0) (atleast 'ui.bootstrap.datepicker', 'ui.bootstrap.datepickerPopup' and their dependencys)

    Install

    You can install this package either with npm or with bower.

    npm

    npm install mw-datepicker-range --save

    bower

    bower install mw-datepicker-range --save

    Usage

    Once the script is included in your html file, simply include the module in your app:

    angular.module('myApp', ['mw-datepicker-range']);

    You can use the datepicker like always, if you want to have the range selection add 'mw-multi-select'. It will work with the standart datepicker and with the datepicker popup

    <div class="col-md-6">
        <p class="input-group">
            <input type="text" class="form-control" ng-model="dt" mw-multi-select="selectedDates" uib-datepicker-popup="dd/MM/y" is-open="opened" datepicker-options="dateOptions"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>

    'mw-multi-select' contains an array with all dates inside the selected range. The viewValue is changed so that it will use the first and last Date from the array. This module will use the customClass property of the datepickeroptions to add the class 'selected' to every date in the selected range, look into the example for more information.

    Be aware of the fact that if you use the range selection the model is literally useless for you because it will only store the current clicked date. If you want to use the selected range you can use either the full array or use the service to parse the array into an object with 'before' and 'after' property

    $scope.mwMultiSelectService.parse($scope.selectedDates, format);

    Demo

    View demo on Plunker

    SmartTable support

    mw-datepicker-range now supports SmartTable

    To use it you need to add this:

    <th>
        <st-date-range predicate="birthDate" selected-dates></st-date-range>
    </th>

    'st-date-range' will create the necessary datepicker elements. If you want to override the template you need to override 'stDateRange.html' with your own template.

    Tasklist

    • add documentation
    • fix spelling, grammar mistakes
    • add second selection type
    • SmartTable template config

    Install

    npm i mw-datepicker-range

    DownloadsWeekly Downloads

    7

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar