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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -