以下是测试代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" value="" onfocus="$(this).datepicker();" />
    <br />
    为什么这里点击的时候,第一次没有效果,要第二次才会出现 日期选择框,
    <br />
    我用FireBug看到,当第一次onfocus的时候,jquery.ui.datepicker是对这个对像进行初始为为:
    <br />
    &lt;input id="dp1297446258847" class="hasDatepicker" onfocus="$(this).datepicker();" type="text" value="" /&gt;
    <br />
    还有就是添加上了“ui-datepicker-div”这个DIV
    <br />
    那如何更改
    &lt;input type="text" value="" onfocus="$(this).datepicker();" /&gt;
    <br />
    这行代码可以第一次onfocus的时候就显示出日期对话框
    <br />
    谢谢
</body>
</html>

解决方案 »

  1.   

    我用IE测试是正常的,FF就出现像你说的情况.在看看...
      

  2.   

    测试了下ff确实这样,不过ie那些不会
    不然你换个日期控件吧 my97不错
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $(function(){
    $("#datepicker").datepicker();
    })
    //-->
    </SCRIPT>
    </head>
    <body>
        <input id="datepicker" type="text" value="" />
        <br />
        为什么这里点击的时候,第一次没有效果,要第二次才会出现 日期选择框,
        <br />
        我用FireBug看到,当第一次onfocus的时候,jquery.ui.datepicker是对这个对像进行初始为为:
        <br />
        &lt;input id="dp1297446258847" class="hasDatepicker" onfocus="$(this).datepicker();" type="text" value="" /&gt;
        <br />
        还有就是添加上了“ui-datepicker-div”这个DIV
        <br />
        那如何更改
        &lt;input type="text" value="" onfocus="$(this).datepicker();" /&gt;
        <br />
        这行代码可以第一次onfocus的时候就显示出日期对话框
        <br />
        谢谢
    </body>
    </html>
      

  4.   

    jquery-ui 里面有详细的demo LZ好好去看看吧
      

  5.   

    RE:thc1987
    ---------------
    $("#datepicker").datepicker();
    这种写法我知道,
    但是现在我要的写法是在onfocus里面出来的
    因为我Ajax一段html给div的时候如果有日期控件我就都得再写上
    如:
    #("#divMain").html(MyAjax("a.htm"));//ajax一段HTML
    $("#divMain.datepicker").datepicker();
    这样很麻烦我得判断是否有日期控件
    所以我要用
    <input type="text" value="" onfocus="$(this).datepicker();" />
    这种方式的话上面的js代码就不用管是否ajax过来的html是否有日期谢谢
      

  6.   

    你把日期控件加个相同的class不就可以了吗
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $(function(){
    $(".dpk").datepicker();
    })
    //-->
    </SCRIPT>
    </head>
    <body>
        <input class="dpk" type="text" value="" />
    <input  type="text" value="" />
    <input class="dpk" type="text" value="" />
        <br />
      
    </body>
    </html>
      

  7.   

    貌似问题的重点不在这里,用ID还是用CLASS属性去找那个控件都是一样的结果,我看他的问题就属于是浏览器不兼容,要分析下这个控件的代码才知道是什么原因造成的。
      

  8.   

    RE:你把日期控件加个相同的class不就可以了吗
    --------------
    我的问题是:
    <input type="text" value="" onfocus="$(this).datepicker();" />
    这一段HTML是我ajax过来动态添加的
    如果这样ajax过来在FF中要点击两次才会出datepicker
    但如果是ajax过来
    <input type="text" value="" class="dtp" />
    的话我就得再写上:
    $("#divMain .dtp").datepicker();
    但我ajax过来的html不一定会一定就有日期选择框,所以每次都要加上那句代码不现实
    如:#("#divMain").html('<input type="text" value="" class="dtp" />');//这段HTML为ajax过来,可能会有日期选择也可能会没有
    $("#divMain.datepicker").datepicker();//然后每一次ajax后我都得再加上这一句
    //所以我就想写成<input type="text" value="" onfocus="$(this).datepicker();" />
    //但这样在ff中就要点击第二次才出现,怎么解决谢谢
      

  9.   

    明白了.
    问题就在要动态判断input是否为日期控件.还好jquery有live方法:
    live(type, [data], fn)
    说明:
    jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。这样对后面添加来控件也有效了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    $(function(){
    // 当鼠标移到input上时给这个input添加日期控件
    // 理论上用户鼠标点击事件是不可能发生在移动事件之前的
    // 所以在移动事件前添加..
    $(".dpk").live("mousemove",function(e){
    $(this).datepicker();
    });
    })
    function add(){
    $("body").append('<input class="dpk" type="text" value="" />');
    }
    //-->
    </SCRIPT>
    </head>
    <body>
        <input class="dpk" type="text" value="" />
    <input  type="text" value="" />
    <input class="dpk" type="text" value="" />
        <br />
    <button onclick="add()">add</button>
      
    </body>
    </html>