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;
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
'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
$scopemwMultiSelectService;
Demo
SmartTable support
mw-datepicker-range now supports SmartTable
To use it you need to add this:
'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