Question

嗨我有一种情况，我需要在输入元素聚焦时绑定jquery UI datepicker（{}）函数。我无法使用下面的代码实现它，所以伙伴们plz帮助我如何绑定当输入元素被聚焦时的datepicker函数

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
	<title> Jquery UI Date Picker </title>
</head>
<body>
   
    <input type="text" id="date" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>
       //$('#date').datepicker({});
       $('#date').on('foucs',function(){
          $(this).datepicker({});
       });
    </script>
</body>
</html>

Answer 1

您可以使用onclick事件打开datepicker：

<input type="text" id="date" onclick="$('#date').datepicker();$('#date').datepicker('show');" />

OR

$( "#date" ).focus(function() {
    $('#date').datepicker();
    $('#date').datepicker('show');
});

Answer 2

试试这个

$(function() {
  $("#datepicker").datepicker();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>Date:
  <input type="text" id="datepicker">
</p>

Answer 3

代码应该是：

$( "#date" ).focus(function() {
    $( "#date" ).datepicker();
});

参考焦点：https://api.jquery.com/focus/ 引用日期选择器：https://jqueryui.com/datepicker/

在输入元素

3 个答案: