jQuery日期选择器onselect问题

Question

jQuery日期选择器onselect问题

14

按照jQuery网站上基本的onSelect规范，我尝试了以下代码：

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#datepicker").datepicker();


$('#datepicker').datepicker({
   onSelect: function(dateText, inst) { alert("Working"); }
});



  });

  </script>
</head>
<body style="font-size:62.5%;">

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

</body>
</html>

我做不到！

最初我一直在尝试让一个更复杂的东西工作，但是 onSelect 一直无法正常工作，所以我回到了基础，但还是不能正常工作。有人知道我做错了什么吗？

- alex

你能把创建日期选择器的HTML代码粘贴在这里吗？ - Dirk

4个回答

33

选择日期后，此代码必须正常运行：

$("#datepicker").datepicker({
    dateFormat: 'dd/mm/yy'
}).on("changeDate", function (e) {
    alert("Working");
});

- hamzeh.hanandeh

2

尝试了所有的变体，这是唯一有效的一个，感谢 @hamzeh。 - Abdullah

3

如果有人使用 https://github.com/eternicode/bootstrap-datepicker 时遇到问题，可能是因为你使用的方法不正确。以下是他们使用的方式。 - Maduka Jayalath

1

“changeDate” 对我也起作用。 “option”、“onSelect” 和其他变体都不起作用。谢谢！ - Ghan

谢谢，这节省了我的时间。只有"changeDate"起作用了！ - Uma

13

你可以尝试移除第二个 $("#datepicker").datepicker()，即只留下以下代码：

$(document).ready(function(){
    $('#datepicker').datepicker({ onSelect: function(dateText, inst) { alert("Working"); } });
});

- VoteyDisciple

1

自从上次回答这个问题后，事件名称已经改变了。请参考此处的事件和示例：http://bootstrap-datepicker.readthedocs.io/en/latest/events.html - Stateful

0

jQuery日期选择器的onSelect有时不起作用，但您可以通过在类型的 onchange 事件上调用方法来绕过它。

function changeDate() {
   $("#datepicker").datepicker(
        "change",
        { 
            alert("I am working!!");
        }
    );
}

调用此changeDate()方法的方式为-

<div type="text" id="datepicker" onchange ="javascript:changeDate();" />

- Naveen Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ken Browning · Accepted Answer

你没有正确使用API。别太在意，一开始很容易让人感到困惑。

这两行代码都是告诉日期选择器小部件在元素上初始化一个日期选择器：

$("#datepicker").datepicker();
$('#datepicker').datepicker({
   onSelect: function(dateText, inst) { alert("Working"); }
});

第一个选项可以删除，因为它除了阻止第二个选项产生任何影响之外什么也没有做。

如果您想在已经初始化小部件后更改其中一个选项的值，则需要使用此 API：

$('#datepicker').datepicker('option', 'onSelect', function() { /* do stuff */ });

或者，你可以使用jQuery的bind函数来附加一个处理程序：

$('#datepicker').bind('onSelect', function() { /* do stuff */ });