datepicker - 通过datepicker对象初始化时,onSelect事件未触发

时间:2016-12-15 18:31:19

标签: javascript jquery datepicker

我正在尝试触发onSelect事件,如下所示,但它无效。

我需要根据我的应用程序设计使用datepicker对象。

var datePickerObject = $('#datepicker').datepicker();

datePickerObject.datepicker(
  {
    onSelect: function(dateText, inst) { alert("Working"); }
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input type="text" id="datepicker"/> //Updated as per Oscar jar suggestion

任何建议都将不胜感激。

1 个答案:

答案 0 :(得分:1)

如果错误,请纠正我,但我认为您错误的是,datepicker组件在调用{{1}时 初始化了两次 首次创建datepicker(...)时的方法,然后再将其他配置(例如datePickerObject函数)添加到已初始化的onSelect < em>(也许这就是为什么它不起作用,你的功能被忽略了,因为它是第二次添加的。)

所以,如果你不这样做,你只需要初始化组件一次并使用所需的配置(参见下面的例子)那么你就可以使用它了:

object
var cfg = {}, 
    cmp = $('#datepicker');

// Add event handlers
cfg.onSelect = onDateSelect;

// Add other configs
cfg.changeMonth = true;
cfg.changeYear = true;
cfg.dateFormat = 'dd-mm-yy';

// Initialize component
cmp.datepicker(cfg);

function onDateSelect(date, cmp) {
  console.log('Selected date is: %o', date);
};

另一方面,我想知道为什么你的代码片段中有以下内容:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<div id="datepicker"></div>

(由于<div type="text" id="datepicker"></div> 属性不属于type元素)

如果这就是您所需要的,那么为div组件添加input,如下所示:

datepicker

<强> 更新:

我在第一次初始化组件时测试了你的代码并传递了你的事件处理程序,并且它有效:

<input type="text" id="datepicker"/>