使用与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"

感谢

还有另一个可以在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"…

我不知道此刻什么更好的技术，以便畅通自己，如果有人知道一个角度的方式，请让我知道

答

并非所有的jQuery插件的工作权利开箱即用角。 Angular不会观察“外部”更改的输入，因为它只会在（a）用户更改它时或（b）控制器更改该值时才会更改该值。必须修改角码以监视输入值的变化，但性能可能会因此受到影响。

我复制你看到这里的问题：http://jsfiddle.net/kf4Xt/

如果你想从你的“黑客”的时候，你将需要（从.VAL（）手拉日）将这个插件封装在指令中并使用该指令。这样做会更加符合Angular，你会这样做“角度的方式”。

该指令应负责调用$(element).datetimepicker()，并通过双向绑定提供所选值。

的AngularStrap项目正是这样做有很多Twitter的引导插件，让你可以检查它们的来源如何看它是如何正在做。

你能指导我怎么做吗？我很新，这里是我的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风格，但我认为这不会是一个问题。

使用与AngularJS引导，日期时间选择器

相关推荐