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

Question

通过使用日期时间选择器在输入中输入日期，ng 模型不会捕获日历按钮输入的日期。只有当我在日历按钮输入的日期插入这样的 space 时，ng-model 才会捕获它。谁知道告诉我如何通过按日历按钮让 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) 级别控制和绑定。 datepicker 没有自动更新 ng-model 的值，您需要在 datetimepicker 的更改事件上使用 ngModel.$setViewValue(val.date); 手动更新相应 ng-model 的值，即 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取小部件日历的值？

How to Angularjs take the value of the widget calendar?

jquery

calendar

widget

angularjs