Using bootstrap-datetime picker with AngularJS -
my project needs datetime found (meridian format in) bootstrap-datetimepicker seems pretty good, not able use it
all did in code
<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>
but when console.log($scope.transaction) in controller
$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); }
i see
resource {name: "test", debit: "false", date: undefined, amount: "12", category: "7816635c-3da1-4ccc-b8ab-c07bc3b42202"…}
the date undefined. how can associate value selected in ui ng-model?
update
although, jquery, can see value
$('.form_datetime input').val() "08 may 2013 - 08:12 am"
thanks
not jquery plugins work right out of box angular. angular isn't observing input "outside" changes, because expects value change if (a) user changes it, or (b) it's changed controller. angular code modified monitor changes value of input, performance suffer result.
i've replicated problem you're seeing here: http://jsfiddle.net/kf4xt/
if want away "hack" (pulling date .val() manually), you're going need wrap plugin in directive , use directive. doing way more inline angular , you'd doing "the angular way".
the directive should responsible calling $(element).datetimepicker()
, , providing chosen value via bi-directional binding.
the angularstrap project doing lot of twitter bootstrap plugins, check source how see how it's being done.
Comments
Post a Comment