How to bind data from datepicker to a regular ng-model - html

Question

jsp page:
<label>Script ID:</label>
<input name="scriptId" type="text"
ng-model="selectedScript.scriptId"
ng-disabled="true"
value="{{selectedScript.scriptId}}"
/>
<form>
<h1>Date Pannel</h1>
<fieldset>
Pick a start date:<br>
<input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerStart" ng-model="parent.startDate" onchange="document.getElementById('datePickerEnd').setAttribute('min', document.getElementById('datePickerStart').value)"><br><br>
Pick an end date:<br>
<input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerEnd" ng-model="parent.endDate" ><br><br>
<button ng-disabled = "mode =='BROWSE'" ng-click="setDates()"
>Set Dates</button>
</fieldset>
</form>
controller.js
$scope.parent = {startDate:''};
$scope.parent = {endDate:''};
$scope.selectedScript.startDate = null;
$scope.selectedScript.endDate = null;
$scope.setDates = function setDates() {
$scope.selectedScript.startDate = $scope.parent.startDate.getTime();
$scope.selectedScript.endDate = $scope.parent.endDate.getTime();
myAppFactory.setDates($scope.selectedScript.startDate, $scope.selectedScript.endDate, $scope.selectedScript.src).success(function(data) {
$scope.selectedScript.src=data;
});
}
That's all the code i need to get some stuff done...
Now I have a table on my jsp page...
<tr
ng-repeat="s in scripts
ng-click="selectScript(s, $index)"
ng-class="getSelectedClass(s)">
<td>{{s.scriptId }}</td>
<td>{{s.fileName }}</td>
</tr>
controller.js
$scope.selectScript = function(script, index) {
if ($scope.mode != 'BROWSE')
return;
$scope.parent.startDate = $scope.selectedScript.startDate; <-- this part
$scope.parent.endDate.setTime = $scope.selectedScript.endDate; <--and this
$scope.selectedScript = script;
$scope.selectedRow = index;
};
When I save the script, the data in the database has startDate and endDate
that works...
My problem is that selectedScript as a model, in the code above, don't has any value in startDate and endDate...it's null (but the fields exist, and the database has the data I need)
But I need somehow to make it possible that parent.startDate and endDate are bound to the selectedScript's startDate and endDate...
Btw, i 1st tried to make the ng-model of the datepicker like selectedScript.startDate, but that didn't work...
Later I found out that the datepicker has it's own scope, and that's causing my problems...at least I believe so.
I just hope that I have made myself clear...
Can you help me?

Answer 1

I think your issue is because when you retrieve the data from the database, it passes it as a string, which isn't a format that the datepicker can read.
Essentially what you need to do is parse it as a Date attribute, to do this you can do;
$scope.parent.startDate = new Date($scope.selectedScript.startDate);
$scope.parent.endDate = new Date($scope.selectedScript.endDate);
Use this in the relevant places to parse as a date, or you can set up a watch to do it for you whenever the value is changed;
$scope.$watch('parent.startDate', function(startDate){
$scope.parent.startDate = new Date($scope.parent.startDate);
});
You can only use $watch for single values, or you can watch the whole object as 'parent'.
Hope it helps!