Fatal编程技术网
  • jquery/
  • Jquery 第二次选择时，angularjs引导日期选择器值未更改

Jquery 第二次选择时，angularjs引导日期选择器值未更改

jquery angularjs html twitter-bootstrap-3

Jquery 第二次选择时，angularjs引导日期选择器值未更改,jquery,angularjs,html,twitter-bootstrap-3,Jquery,Angularjs,Html,Twitter Bootstrap 3,目前我正在为angularjs开发一个日期采集器，该采集器按预期工作。但当我第二次尝试从datepicker中选择值时，该值并没有改变。以下是迄今为止我尝试过的代码片段：- HTML 我还在select下拉列表的selectionchanged事件中将datepicker值设置为空字符串，如下所示：- $scope.FromDate = ''; $scope.ToDate = ''; 将下拉值设置为空字符串后，每当我从datepicker中选择任何值时，该值都将变为null。 任何帮助都将不胜

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

HTML

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

$scope.FromDate = '';
$scope.ToDate = '';
将下拉值设置为空字符串后，每当我从datepicker中选择任何值时，该值都将变为null。
任何帮助都将不胜感激。

如果您查看plnkr中的控制台，您将看到jquery没有正确加载

看这个plnkr。它并不完美，但会给你一个开始

HTML


AngularJs日期选择器
从日期开始
从日期开始
如果查看plnkr中的控制台，就会发现jquery没有正确加载

看这个plnkr。它并不完美，但会给你一个开始

HTML


AngularJs日期选择器
从日期开始
从日期开始
在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：

在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：

你能创建一个提琴吗？创建提琴请看提琴：-我想看到每当我从DatePicker选择日期时文本输入的变化。你应该看看如何将jquery插件转换为angular指令。有很多资源可以帮助你更好地理解你想要实现的目标。像您这样混合jquery和angular不是正确的方法！另外，请看一下如何在directive中访问父作用域您可以创建一个fiddle吗？创建fiddle请看fiddle:-我想看一下每当我选择date from date Picker时文本输入的变化。您应该看一下如何将jquery插件转换为angular指令。有很多资源可以帮助你更好地理解你想要实现的目标。像您这样混合jquery和angular不是正确的方法！另外，请查看如何在directiveUpdated plunker:[Updated plunker]（）1中访问父作用域。选择一个日期，您可以在输入框2上看到该值。单击重置按钮3。再次选择问题出现之前选择的相同日期，此时您无法看到该值。以下是更新的plunkerdp.change仅在更改日期值时触发，选择相同的日期不会更改选择器中存储的值。您应该改用dp.hide事件。更新的plunker:[更新的plunker]（）1。选择一个日期，您可以在输入框2上看到该值。单击重置按钮3。再次选择问题出现之前选择的相同日期，此时您无法看到该值。以下是更新的plunkerdp.change仅在更改日期值时触发，选择相同的日期不会更改选择器中存储的值。您应该改用dp.hide事件。 
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);
          }
      });
    }
  }
});

<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>

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