第一次单击时未显示日期选取器

Date Picker is not getting displayed on the first click

本文关键字：日期 选取 显示 单击 第一次      更新时间：2023-09-26

我正在尝试将Jquery UI的DatePicker用于文本字段。它不会在第一次单击时显示，而是在取消聚焦和聚焦时显示。这是我正在尝试的示例代码。我很困惑为什么这不是第一次。

Html

<tr><td>Text Field:</td><td><input type="text" name="sampleDate" id="sampleDate" onfocus="showDatePicker(this)"/></td></tr>

JavaScript:

function showDatePicker(element)
{   
$(element).datepicker();    
}

尝试在上更新此解决方案

jsfiddle

对于这个解决方案，假设每个将显示calss"date"的calander的字段，不需要附加onclick事件

<tr>
    <td>Text Field:</td>
    <td>
        <input type="text" name="sampleDate" class="date" id="sampleDate" />
    </td>
</tr>

将事件附加到具有类日期的每个输入元素

$(document).ready(function () {
    $( ".date" ).each(function( index ) {
       $( this ).datepicker();
   });
});

尝试点击事件

onClick="showDatePicker(this)"

简单的解决方案是使用Datepicker

因为在第一次聚焦时，日期选择器没有得到定义的

这将产生错误

Uncaught excpetion: showDatePicker is not defined

一个简单的解决方案是

$(document).ready(function () {
    $('#sampleDate').datepicker();
});

Fiddle

相关文章：