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

【问题标题】：angularjs bootstrap datepicker value not getting changed when selecting second time第二次选择时，angularjs bootstrap datepicker值没有改变
【发布时间】：2017-07-02 07:26:20
【问题描述】：

目前我正在为 angularjs 开发一个 datepicker，它按预期工作。但是当我第二次尝试从 datepicker 中选择值时，该值并没有改变。以下是到目前为止我尝试过的代码 sn-p ：-

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);
            }
        }
    }
});

我还在 select dropdown 的 selectionchanged 事件中将 datepicker 值设置为空字符串，如下所示：-

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

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

【问题讨论】：

你能做一个小提琴吗？
请创建小提琴
请看小提琴：-Angular boostrap datepicker
每当我从 datepicker 中选择日期时，我都想查看文本输入的变化
你应该看看如何将 jquery 插件转换为 angular 指令。那里有大量资源可以帮助您更好地了解您想要实现的目标。像你一样混合 jquery 和 angular 不是正确的方法！还要看看如何在指令中访问父作用域

标签： jquery angularjs html twitter-bootstrap-3

【解决方案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>

【讨论】：

Updated plunker : [Updated plunker](plnkr.co/edit/o3UvmjFKqUhZWihh1f84?p=preview ) 1. 选择一个日期，可以看到输入框上的值 2. 点击重置按钮 3. 再次选择之前选择的相同日期问题是这次你看不到价值。以下是更新的 plunker
dp.change 仅在您更改日期值时触发，选择相同的日期不会更改存储在选取器中的值。您应该改用 dp.hide 事件。

【解决方案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

【讨论】：