jQuery:如何将侦听器放在Angular表带上的datetimepicker值更改?

维卡斯·班萨尔(Vikas Bansal)

我必须听角度皮带日期时间选择器值从 jquery

(无法在角度应用程序/控制器中添加代码或使用uguglar代码)

请提供仅使用Jquery / JScript的方法。非常感谢

AngularStrap DatetimePicker文档

我尝试了什么

$("#datepk").bind('input', function(){alert('value changed');})

$("#datepk").bind('change', function(){alert('value changed');})

$("#datepk").bind('DOMSubtreeModified', function(){alert('value changed');})

上述方法不起作用。另外,val()函数是返回值,但是当我尝试从中获取值时,.attr('value')它是undefined

$("#datepk").val(); /// nicely retruning the value
$("#datepk").attr('value'); /// returning undefined

虚拟应用

<htm>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script>
      var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
      myapp.config(function($datepickerProvider) {
        angular.extend($datepickerProvider.defaults, {
          dateFormat: 'dd/MM/yyyy',
          startWeek: 1
        })
      });

      myapp.controller('myctrl', ['$scope', '$datepicker',
        function($scope, $datepicker) {
          $scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
          $scope.selectedDateAsNumber = 509414400000; // <- [object Number]
          $scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
          $scope.untilDate = ''; // <- [object Undefined]
        }
      ]);
    </script>

  </head>

  <body ng-app="myapp" ng-controller="myctrl">
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
        </label>
        <input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
      </div>
    </form>
  </body>
</htm>

阿伦·信德

为什么不更改日期就调用JavaScript函数。

  var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
  myapp.config(function($datepickerProvider) {
    angular.extend($datepickerProvider.defaults, {
      dateFormat: 'dd/MM/yyyy',
      startWeek: 1
    })
  });

  myapp.controller('myctrl', ['$scope', '$datepicker',
    function($scope, $datepicker) {
      $scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
      $scope.selectedDateAsNumber = 509414400000; // <- [object Number]
      $scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
      $scope.untilDate = ''; // <- [object Undefined]

    }
  ]);


  $(document).ready(function() {
    $("#datepk").on("click", function() {
      $(".datepicker table tr td").on("click tap", function(event) {
        alert($("#datepk").val())
      })
    })
  })
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="myctrl">
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
        </label>
        <input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
      </div>
    </form>
  </body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将键侦听器更改为鼠标侦听器

反应形式:如何将FormControl的引用传递给其子级,以便它可以注册值更改侦听器?

JavaFX的TextField的值更改侦听器

值更改侦听器到JTextField

值更改侦听器到JTextField

如何使用值更改侦听器更改JSF页面中的语言环境?

如何将业务逻辑与JMS侦听器分开?

Android:如何将侦听器设置为MenuButton?

如何将侦听器附加到单选按钮

如何将侦听器从Fragment传递到DialogFragment?

如何将侦听器附加到克隆的元素?

如何将侦听器添加到表?

侦听器或单选按钮的值更改JQuery v3.5.1

如何正确地向Map.Entry添加值更改侦听器?

如何将事件侦听器添加到ag网格的单元格内的元素(使用js或jquery,不是Angular,不是reactjs,不是vue)

jQuery:输入属性更改的侦听器

Unir y-如何将标记放在对象3D(.obj)中并获取其触摸侦听器

将“ On Change”侦听器放在jFormattedTextField上

将 SQLAlchemy 事件侦听器放在多对多表上

将点击侦听器放在mvvm android中的位置

如何将侦听器附加到JavaFX微调器?

如何将参数从组件传递到 React 中的事件侦听器?

如何将事件侦听器添加到Redux表单

如何将 JSF InputText 值传递给 ajax 侦听器

如何将onclick侦听器附加到Android Studio的导航抽屉活动中?

如何将事件侦听器添加到动态创建的HTML列表元素?

如何将点击侦听器添加到ng-select选项?

如何将 updateend 事件侦听器添加到两个对象?

如何将侦听器附加到在密钥到期时被调用的MemoryCache?