jQuery日期拾取器弹出两次

Question

我使用IE7(不得不)，Java Server Faces 1.2，最新版本的jQuery datepicker动态生成的数据行情况。还需要支持用户手动输入日期。如果不手动输入日期，日期选择器可以正常工作。奇怪的行为是当用户手动输入日期时，然后将鼠标移动到窗口的任何部分，单击，原始日历关闭(好)，但随后它又弹出(坏)。似乎focus()在这方面发挥了某种作用，因为如果我编写一个没有最后一个焦点的简单日期摘取器，事情就很好，但是为了处理动态AJAX生成的行，我必须使用focus()。

如果我手动输入日期，然后按Enter键，一切正常。此外，Firefox工作得很好，但我们需要支持IE7。

代码如下(您可以忽略与backbean相关的内容)。如有任何帮助，不胜感激。

<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq("[id$=fmv]").live('click', function() {
        jq(this).datepicker( {
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true,
        }).focus();
    });
});
</script>

输入:

    <h:inputText id="fmv"
                     size="10"
                     maxlength="10"
                     style="background-image:url      ('../../../jquery/images/calendar1.png');
                       background-repeat:no-repeat;background-position:right;"
                       title="#{msgs['choose.date.lbl']}"
                       value="#{pItem.dateOfStudy}"
                       validator="#{pItem.validate}"
                       onkeyup="submit();"
                       onchange="submit();"
                       name="fmv"         
                       valueChangeListener="#{pItem.dateChangeListener}"> 
                <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York" dateStyle="short" type="date"/>
            </ice:inputText>

我试着做一个非常简单的xhtml。生成的html文件很大，因为我们的项目包括。然后我把jquery脚本和inputtext html部分剪掉，放到一个html文件中，问题就不会再出现了。奇数。xhtml文件:

     <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq("[id$=fmv]").live('click', function() {
        jq(this).datepicker( {
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true
        }).focus();
    });
});
</script>

<h:inputText id="fmv" size="10" maxlength="10"
    style="background-image:url('../../../jquery/images/calendar1.png');
                       background-repeat:no-repeat;background-position:right;"
    title="#{msgs['choose.date.lbl']}" value="#{pItem.dateOfStudy}"
    validator="#{pItem.validate}" partialSubmit="true" onkeyup="submit();"
    onchange="submit();" name="fmv"
    valueChangeListener="#{pItem.dateChangeListener}">
    <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York"
        dateStyle="short" type="date" />
</h:inputText>
     </ui:composition>

Answer 1

跳过点击，保持焦点。这意味着当输入集中时。

<script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq("[id$=fmv]").datepicker({
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true
        });
    });
</script>

单独函数示例:

function addCalendar(obj)
{
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq(obj).datepicker({
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true
        });
    });
}

我想这会对你有帮助。