Question

通过使用datetimepicker在输入中输入日期，ng-model不会捕获日历按钮输入的日期。仅当我在日历按钮输入的日期上插入这样的空格时，ng模型才会捕获此信息。任何人都知道如何按下日历按钮，ng-model捕获值？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="/static/js/bootstrap-datetimepicker.js"></script>
<script src="/static/js/bootstrap-datetimepicker.pt.js"></script>
<link rel="stylesheet" href="/static/css/datetimepicker.css" type="text/css"/>

</head>
<body>
    <table ng-app="">
        <td>
            <div id="data1" class="input-group date">
               <input id="data1" name="data1" ng-change="data1" ng-model="data1" type="text" />
               <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
               <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
            <script type="text/javascript">
               $("#data1").datetimepicker({
                    minView: 2,
                    autoclose: true,
                    language: 'pt',
                    format: 'dd/mm/yyyy',
                    showMeridian: true,
                    startView: 2}).find('input').addClass("form-control");
            </script>
        </td>
        <td><p ng-bind="data1"></p></td>
    </table>
</body>
</html>

Answer 1

你应该只通过指令渲染datetimepicker或任何jquery插件，因为指令提供了良好的元素（DOM）级别控制＆amp;捆绑。 datepicker没有更新ng-model自动版的价值，您需要在ng-model的更改事件中使用ngModel.$setViewValue(val.date);手动更新相应datetimepicker的值即dp.change事件。

<强> HTML

<input name="data1" datetimepicker ng-model="data1" type="text" />

<强>指令

app.directive('datetimepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.datetimepicker();
            element.on('dp.change',function(val){
                ngModel.$setViewValue(val.date);
                scope.$apply()
            });
        }
    };
});

Working Fiddle

希望这可以帮助你，谢谢。

Angularjs如何获取小部件日历的价值？

1 个答案: