在输入元素的焦点上绑定 jquery UI 日期选择器

Question

你好，我有一种情况，当输入元素为 focused.i 时，我需要绑定 jquery UI 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 事件打开日期选择器：

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

或

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

Answer 2

代码应该是：

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

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

Answer 3

试试这个

$(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>

在输入元素的焦点上绑定 jquery UI 日期选择器

Bind jquery UI date-picker on focus of input element

jquery

jquery-ui

jquery-ui-datepicker