使用與AngularJS引導，日期時間選擇器

我的項目需要的日期時間，所以我發現（子午線格式）bootstrap-datetimepicker這似乎還不錯，但我不能夠使用它使用與AngularJS引導，日期時間選擇器

所有我在我的代碼確實是

<div class="control-group"> 
    <label class="control-label">Date</label> 

    <div class="controls"> 
     <div class="control-group input-append date form_datetime" data-date="2012-12-21T15:25:00Z"> 
     <input size="16" type="text" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" value=""> 
     <span class="add-on"><em class="icon-remove"></em></span> 
     <span class="add-on"><em class="icon-th"></em></span> 
     </div> 
    </div> 
    </div>

，但是當我在我的控制器做的console.log（$ scope.transaction）

$scope.save = function() { 
    var transaction = new Transaction(); 
    transaction.name = $scope.transaction['name']; 
    transaction.debit = $scope.transaction['debit']; 
    transaction.date = $scope.transaction['date']; 
    transaction.amount = $scope.transaction['amount']; 
    transaction.category = $scope.transaction['category'].uuid; 
    console.log('adding', $scope.transaction); 
}

我看到

Resource {name: "Test", debit: "False", date: undefined, amount: "12", category: "7816635c-3da1-4ccc-b8ab-c07bc3b42202"…}

日期未定義。如何將UI中選擇的值與ng-model相關聯？

UPDATE
雖然使用jQuery，我可以看到價值

$('.form_datetime input').val() 
"08 May 2013 - 08:12 AM"

感謝

來源

2013-05-08 daydreamer

還有另一個可以在https：// github上找到的用於角度的datetimepicker指令。com/zhaber/datetimepicker – 2013-11-02 23:19:48

以來，我的項目也取決於jQuery的，我做了以下使它在工作，我的控制器

transaction.date = $('.form_datetime input').val()

在console.log上，我看到

Resource {name: "OneMore", debit: "True", date: "2013-05-08T12:27:50", amount: "123", category: "79128f9a-74ab-4c63-b60e-4934aa367575"…

我不知道此刻什麼更好的技術，以便暢通自己，如果有人知道一個角度的方式，請讓我知道

來源

2013-05-08 19:29:35 daydreamer

並非所有的jQuery插件的工作權利開箱即用角。 Angular不會觀察「外部」更改的輸入，因爲它只會在（a）用戶更改它時或（b）控制器更改該值時纔會更改該值。必須修改角碼以監視輸入值的變化，但性能可能會因此受到影響。

我複製你看到這裏的問題：http://jsfiddle.net/kf4Xt/

如果你想從你的「黑客」的時候，你將需要（從.VAL（）手拉日）將這個插件封裝在指令中並使用該指令。這樣做會更加符合Angular，你會這樣做「角度的方式」。

該指令應負責調用$(element).datetimepicker()，並通過雙向綁定提供所選值。

的AngularStrap項目正是這樣做有很多Twitter的引導插件，讓你可以檢查它們的來源如何看它是如何正在做。

來源

2013-05-08 19:30:19 Langdon

你能指導我怎麼做嗎？我很新，這裏是我的plunker - http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview – daydreamer 2013-05-12 22:08:42

看起來像你在那裏工作，但如果你想要更進一步與元素指令：http ：//plnkr.co/edit/uSjf5AfLUTakxVJEsJqB？p =預覽 - 您需要清理一下（使用隔離的範圍傳遞值，以免對模板中的所有內容進行硬編碼） – Langdon 2013-05-13 14:35:02

謝謝，昨天，我想出了http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH，但是你的想法很整潔，但是有一個問題，你可以在ng-model中更改ng-model =「ng-model =」事務.date「，因爲當我這樣做時，它會失敗，並且會將'scope.ngModel = input.val（）;'改爲'scope.transaction.date = input.val（）;'。對我來說，它必須是'$ scope.transaction = {}'的一部分，你可以在mu plunker中看到 – daydreamer 2013-05-13 20:21:15

我知道，這是一種舊的，但只要你已經回答了自己一個變通的解決方案，並要求讓您瞭解的角度來說，這裏是我認爲你正在尋找：

Angular Datetime Picker

它與Twitter Bootstrap風格，但我認爲這不會是一個問題。

來源

2013-09-20 02:50:25 mdentinho

使用與AngularJS引導，日期時間選擇器

回答

相關問題