I am trying to use the angular UI strap datepicker. How to select more than one date from the datepicker and return the value as an array.
5
-
I dont see the reason, its not multiple file selection. Can you explain the reason, example. I really never seen something like. DatePIcker supports one date only, and fills textfieldMaxim Shoustin– Maxim Shoustin2013-05-29 19:39:09 +00:00Commented May 29, 2013 at 19:39
-
I think he means something like when booking a vacation on an airline. You can select multiple days. Angular-ui's datePicker does not support this though so @Abre will have to create their own directive.Mathew Berg– Mathew Berg2013-05-29 19:53:45 +00:00Commented May 29, 2013 at 19:53
-
yes, something like this. multidatespickr.sourceforge.netAbraham Jagadeesh– Abraham Jagadeesh2013-05-30 04:09:08 +00:00Commented May 30, 2013 at 4:09
-
If that is what is being asked, then take a look at thisgabor– gabor2014-02-17 10:48:35 +00:00Commented Feb 17, 2014 at 10:48
-
I wrote a module that extends UI Bootstrap's Datepicker to select multiple dates. github.com/spongessuck/gm.datepickerMultiSelectspongessuck– spongessuck2014-11-14 19:01:06 +00:00Commented Nov 14, 2014 at 19:01
Add a comment
|
2 Answers
You can use gm.datepickerMultiSelect directive, that wraps around ui-bootstrap datepicker directive, adding multi-select feature.
<div ng-controller='AppCtrl'>
<datepicker ng-model='activeDate' multi-select='selectedDates'></datepicker>
</div>
var myApp = angular.module('myApp',['gm.datepickerMultiSelect']);
function AppCtrl($scope) {
$scope.activeDate;
//THIS IS WHERE YOU CAN INITIALIZE VALUES
$scope.selectedDates = [new Date().setHours(0, 0, 0, 0), new Date(2015, 2, 20).setHours(0, 0, 0, 0), new Date(2015, 2, 10).setHours(0, 0, 0, 0), new Date(2015, 2, 15).setHours(0, 0, 0, 0)];
$scope.removeFromSelected = function (dt) {
$scope.selectedDates.splice($scope.selectedDates.indexOf(dt), 1);
}
}
There's an article on this on my blog http://irhadbabic.com/?p=351 Also, here's working JSFiddle that you can use http://jsfiddle.net/prdkvp7u/4/
Comments
The directive that you're working with doesn't support the multi-datepicker that you want. You can always go for something like Bootstrap Datepicker and not necessarily stick with an Angular directive.
Your option is fairly limited in this regard unless you customize the directive the way you want it to behave.
