javascript - 无法识别 JQUERY datetimepicker onSelect

标签 javascript jquery datepicker datetimepicker onselect

我正在尝试使用 jquery 中的日期时间选择器。每当您选择新日期时,我都想清除一些输入字段,但我的 onSelect 不起作用。 首先,它只在文档加载时触发一次。之后它再也不会开火了。 其次,onSelect 不适用于匿名函数。

这不起作用

$(document).ready(function() {
  $(function () {
    $('#dateValue').datetimepicker({
      format: 'YYYY-MM-DD',
      onSelect: function() {
        console.log("testing");
      }
    });
  });
});

这确实有效,但仅在文档加载时触发,然后再也不会

$(document).ready(function() {
  $(function () {
    $('#dateValue').datetimepicker({
      format: 'YYYY-MM-DD',
      onSelect: console.log("testing")
    });
  });
});

index.html中我的head标签导入的文件

<head>
    <meta charset="UTF-8">
    <title>....</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="myCSS.css">
</head>

编辑:我搞砸了,忘了给出错误信息

Uncaught TypeError: option onSelect is not recognized!
    at Function.<anonymous> (bootstrap-datetimepicker.min.js:8)
    at Function.each (jquery.min.js:2)
    at Object.l.options (bootstrap-datetimepicker.min.js:8)
    at c (bootstrap-datetimepicker.min.js:9)
    at HTMLInputElement.<anonymous> (bootstrap-datetimepicker.min.js:9)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at n.fn.init.a.fn.datetimepicker (bootstrap-datetimepicker.min.js:9)
    at HTMLDocument.<anonymous> (script.js:3)
    at j (jquery.min.js:2)

最佳答案

你必须使用 dp.change日期更改时触发的事件。

$('#dateValue').datetimepicker({
  format: 'YYYY-MM-DD',
});

$("#dateValue").on("dp.change", function() {
  console.log("testing");
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class='input-group date' id='dateValue'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

关于javascript - 无法识别 JQUERY datetimepicker onSelect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50099905/

相关文章:

javascript - 与折线图和水平条形图同步的工具提示定位

javascript - d3 javascript 单击一行以更改行颜色 - 更改所有行

grails - 如何在<g:datepicker/> grails和groovy中仅显示 “hour”和 “minute”?

javascript - 未捕获的 typeerror 对象没有方法 'on' : backbone. js

android - 在 Android Studio 上使用 Calendar.getInstance() 时如何插入和填充日期时间

c# - 更改 WPF DatePicker 文本框的外观

javascript - 带有 FormGroup 的 Angular 4 动画部分不起作用

javascript - 搜索变量

javascript - 从一个 Waypoints.js 构造函数动态定位多个 HTML 元素

jquery - 在 Chrome/Safari/Webkit 浏览器上未使用 jQuery.ajax() 的 headers 参数设置 HTTP 请求 header