Here is a simplified version of my code snippet:
tr(ng-repeat='entry in ds3.entries | orderBy:orderByField:reverseSort | filter:query as results')
td
input.screen(type='datetime-local', ng-model='entry.date_received', datetime="MM/dd/yyyy hh:mm a" )
span(ng-hide='') {{entry.date_received | dateFormat }}
tr.screen
td
input.screen(type='datetime-local', ng-model='new_entry.date_received', datetime="MM/dd/yyyy hh:mm a", date-parser="MM/dd/yyyy hh:mm a")
td
button.btn-xs.btn-success(ng-click='insert()')
span.fa.fa-plus-square
| Insert
This Jade code segment is used for the HTML view to facilitate adding new datetime-local data and updating it live, similar to a GoogleDocs Excel table.
My goal is to integrate AngularFire (AngularJS 1.x and Firebase database) with this setup. While I've successfully implemented authentication and text input functionality, I'm facing an issue with storing DATETIME values in Firebase. To work around this limitation, I am exploring alternative solutions for real-time editing and manipulation of datetime inputs using 3-way data binding on a collection.
The plan is to send datetime values to Firebase as integer strings (unix_timestamp) and convert them back to datetime format upon retrieval. For this purpose, I have devised two directives.
1- A filter to display the converted result from integer string in the view.
angular.module('workspaceApp')
.filter('dateFormat', ['$moment', function($moment) {
return function(time) {
return time ? $moment.unix(time).format('MM/DD/YYYY - hh:mm a') : time;
};
}])
2- A directive to handle conversion and saving of integer strings to Firebase without displaying errors in the view. This proves challenging due to the complexities of 3-way data binding implementation. For text fields, I simply use ng-change='ds3.entries.$save(entry)' in the input tag.
.directive("input", function () {
return {
require: 'ngModel',
/* scope : {
entries : "="
},*/
link: function (scope, elem, attr, modelCtrl) {
if (attr['type'] === 'date' || attr['type'] === 'datetime-local') {
modelCtrl.$formatters.push(function (modelValue) {
if (modelValue) {
return new Date(modelValue * 1000);
} else {
return null;
}
});
elem.bind('change', function () {
scope.$apply(function() {
var str = elem.val();
var time = new Date(elem.val());
var unix_time = Math.floor(time.getTime() / 1000);
console.log(str, unix_time);
scope.entries.$save().then(function(ref) {
ref.key() === scope.entry.$id; // true
}, function(error) {
console.log("Error:", error);
});
modelCtrl.$setViewValue(unix_time.toString());
modelCtrl.$render();
// $scope.entry.update(unix_time.toString());
});
});
}
}
};
})
.directive('fetchDate', function(){
return {
link: function($scope){
$scope.$watch('date_received', function(newVal, oldVal){
if (newVal){
$scope.entry.date_received = Math.floor(newVal / 1000);
console.log($scope.entry.date_received);
}
});
}
};
})
I have attempted using ng-change=UpdateFunction() in the datetime input along with corresponding directives and controller functions, but have not yet resolved the issue. Even $watch yielded undefined results for either the old or new date in the console.
$scope.$watch('entry.date_received',function(newVal, oldVal){
console.log(Math.floor(newVal / 1000) , Math.floor(oldVal / 1000));
// $scope.update(newVal);
});
If you have any insights or suggestions on how to tackle this problem, please share them!