Question

目前，我正在为 angularjs 开发一个 datepicker ，它正在按预期工作。但是当我试图从datepicker第二次选择值时，值不会改变。以下是我尝试过的代码片段： -

HTML

<div id="dvFromDate" class='input-group date' datetimepicker ng-model="FromDate">
                                    <input type="text" ng-model="FromDate" class="form-control" @*tooltips tooltip-template="dd/mm/yyyy"*@ required>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                                <script type="text/javascript">
                                    $(function () {
                                        $('#dvFromDate').datetimepicker({
                                            format: 'DD/MM/YYYY'
                                        });
                                    });

                                </script>

AngularJs

    app.directive('datetimepicker', function () {
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return; // do nothing if no ng-model
            ngModel.$render = function () {
                element.find('input').val(ngModel.$viewValue || '');
            }    

            element.on('dp.change', function () {
                scope.$apply(read);
            });

            read();

            function read() {
                var value = element.find('input').val();
                ngModel.$setViewValue(value);
            }
        }
    }
});

我还将选择下拉的 selectionchanged 事件的datepicker值设置为空字符串，如下所示： -

$scope.FromDate = '';
$scope.ToDate = '';

将下拉列值设置为空字符串后，每当我从datepicker中选择任何值时，value都将变为null。任何形式的帮助将不胜感激。

Answer 1

如果你看看你的plnkr中的控制台，你会看到jquery没有正确加载.......

请参阅此plnkr。它不完美，但会给你一个开始！

https://plnkr.co/edit/oyBF62NkNS3sMwumxk7F?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.model = {};
  $scope.model.FromDate1 = "5/5/2016";

});
app.directive('datetimepicker', function($timeout) {
  return {
    restrict: 'A',
    scope: { },
    link: function (scope, element, attrs) {
      angular.element(element).datepicker({
          format: 'DD/MM/YYYY',
          onClose: function(dateText, inst){
            $timeout(function(){scope.$parent.model.FromDate1 = dateText});
             console.log(scope.$parent.model.FromDate1);
             console.log(dateText);
          }
      });
    }
  }
});

HTML

<body ng-controller="MainCtrl">
    <h3>AngularJs Date Picker</h3>
    <div class="col-xs-5">
      <div class="form-group">
        <label>From Date</label>
          <input type="text" class="form-control" id="dp1" datetimepicker />
      </div>
      <div>From Date<input type="text" ng-model="model.FromDate1"/></div>
    </div>
  </body>

Answer 2

在bootstrap-datepicker.js文件中，我已注释掉以下方法中的行：

 notifyEvent = function (e) {
            //if (e.type === 'dp.change' && ((e.date && e.date.isSame(e.oldDate)) || (!e.date && !e.oldDate))) {
            //    return;
            //}               
            element.trigger(e);
        },

现在每当我再次选择相同的日期时，值绑定工作正常。请参阅更新的plunker： Working plunker

第二次选择时，angularjs bootstrap datepicker值没有改变

2 个答案: