2016-07-27 71 views
0

我從AngularJs開始。在AngularJs中實現bootstrap-datepicker

我需要在窗體中實現「N」個日曆。我使用的自舉日期選擇器(https://eonasdan.github.io/bootstrap-datetimepicker/

,如果我指定的inputTextId例如

HTML時,它是工作的罰款:

<input id='datetimepicker2' data-ng-model="vm.search.origin.from" data-ng-click="vm.showCalendar(this)" class="form-control" type="text" placeholder="MM/DD HH:MM"> 

<input data-ng-model="vm.search.origin.to" data-ng-click="vm.showCalendar(this)" class="form-control" type="text" placeholder="MM/DD HH:MM"> 

控制器:

function showCalendar(obj) 
{ 
    $("#datetimepicker2").datetimepicker(); 
} 

它工作正常的一個inputText,如果我想在多個實現它,我必須指定每個名稱和功能。我想通過參考和使用:

reference.datepicker();或類似的東西,以創建一個功能。 這可能嗎?

+0

使用:[** angular-ui#datepicker **](https://angular-ui.github.io/bootstrap/#/datepicker) – developer033

+0

爲什麼使用jquery $(「#datetimepicker2」)。在角度項目,它不是一個很好的做法,你必須使用角度指令,ref http://jsfiddle.net/cletourneau/kGGCZ/或http://plnkr.co/edit/KsK5F1M2zrv0SDTwRM4N?p=preview –

回答

1

聽起來像你想要一個指令。以此爲例子:

app.directive('timePicker', function() { 
    return { 
     link: function($scope, elem, attrs){ 
      $(elem).datetimepicker(); 
     } 
    } 
}); 

你會那麼只需添加time-picker到你想要的輸入。