javascript - The datepicker control provided by angualr-ui-bootstrap, the binding to ng-model fails.

Question

The two input boxes have been bound with ng-model and are used to present data obtained from the background. However, because uib-datepicker-popup="yyyy-MM-dd HH:mm:ss" is written in the first input, the bound data cannot be written to the input.

This picture is the effect that appears after clicking the time control. Because the first input formats the time, the displayed data meets the requirements.

The current question is how to ensure that the first input box after the page is loaded can not only display the obtained data, but also ensure that the time obtained when clicking the time control button meets the format requirements?

This is the first time I ask a question. The language is a bit confusing. I hope friends who see it will forgive me!
I hope friends who love me can answer this question

Answer 1

I have encountered this problem before, ng-bootstrap的时间格式默认是date object，我也遇到过这个问题，我写了个directive把date-picker的事件对象直接转成string.

.directive('dateModelFormat', ['dateFilter', '$parse', function(dateFilter, $parse){
    return {
        restrict: 'A',
        require:'?ngModel',
        link: function(scope, element, attr, ngModel){
            ngModel.$parsers.push(function(viewValue){
                return dateFilter(viewValue, 'yyyy-MM-dd');
            });
        }
    }
}])