2013-05-29 18 views
9

Sto provando a utilizzare il cinturino per l'interfaccia angolare del datario. Come selezionare più di una data da DatePicker e restituire il valore come una matrice.Angularjs bootstrap datepicker: selezionare più date

http://mgcrea.github.io/angular-strap/#/datepicker

+0

Non vedo la ragione, la sua non è più la selezione dei file. Puoi spiegare il motivo, ad esempio. Non ho mai visto qualcosa del genere. DatePIcker supporta una sola data e riempie il campo di testo –

+0

Penso che voglia dire qualcosa come quando si prenota una vacanza su una compagnia aerea. È possibile selezionare più giorni. DataPicker di Angular-ui non supporta questo però così @Abre dovrà creare la propria direttiva. –

+0

sì, qualcosa del genere. http://multidatespickr.sourceforge.net/ –

risposta

2

La direttiva che si sta lavorando con non supporta il multi-DatePicker che si desidera. Si può sempre andare per qualcosa come Bootstrap Datepicker e non necessariamente attenersi a una direttiva Angular.

L'opzione è abbastanza limitata in questo senso, a meno che non si personalizzi la direttiva nel modo in cui si desidera che si comporti.

3

È possibile utilizzare la direttiva gm.datepickerMultiSelect, che avvolge la direttiva date-boot di ui-bootstrap, aggiungendo funzionalità di selezione multipla.

<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); 
    } 
} 

C'è un articolo su questo sul mio blog http://irhadbabic.com/?p=351 Inoltre, ecco JSFiddle funzionante, che è possibile utilizzare http://jsfiddle.net/prdkvp7u/4/

+1

JSFiddle non funziona più – Tdy

Problemi correlati