When I click on edit project button, modal hide fade will display project details. And I want to restore the changed date value into my item.date.sDate, but it doesn't work.
<div class="modal hide fade" id="editdetails">
<div class="modal-header"><h3>Update Project Information</h3></div>
<div class="modal-body">
<label>Project: </label>
<input type="text" value= {{item.data.project}} class="span3" id="appendedDropdownButton" ng-model="item.data.project"><br>
<label>Start Date: </label>
<input type="text" value= {{item.data.sDate}} class="span3" id="datepicker1" ng-model="item.data.sDate"><br>
<label>End Date: </label>
<input type="text" value= {{item.data.eDate}} class="span3" id="datepicker2" ng-model="item.data.eDate"><br>
</div>
<br>
<div class="modal-footer">
<a href="#" class="btn close_btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary save_btn" ng-click="update(item.id)">Save Changes</a>
</div>
</div>
Javascript about datepickers, they change date to text.
$( "#datepicker1" ).datepicker({
inline: true,
dateFormat: 'dd/mm/yy',
onSelect: function(dateText) {
$("#datepicker2").datepicker("option","minDate", dateText)
var modelPath = $(this).attr('ng-model');
putObject(modelPath, $scope, dateText);
$scope.$apply();
}
});
$( "#datepicker2" ).datepicker({
inline: true,
dateFormat: 'dd/mm/yy',
onSelect: function(dateText) {
$("#datepicker1").datepicker("option","maxDate", dateText)
var modelPath = $(this).attr('ng-model');
putObject(modelPath, $scope, dateText);
$scope.$apply();
}
});
You should be using a directive to set up your datepicker. Fortunately, Angular-UI has done that for you.
<div ng-controller="MyCtrl">
<input ng-model="date" ui-date ng-change="dateChanged()"/><br/>
Selected Date: {{date | date: 'MMM d yyyy'}}
</div>
Then in your controller:
app.controller('MyCtrl', function($scope){
$scope.dateChanged = function (){
console.log('Date is: ' + $scope.date);
};
});