jQuery日期选择器弹出两次

Question

我使用的是IE7 (不得不)，Java Server faces1.2，jQuery datepicker的最新版本，用于动态生成数据行的情况。还需要支持用户手动输入日期。如果不是手动输入日期，Datepicker工作得很好。奇怪的行为是当用户手动输入日期，然后将鼠标移动到窗口的任何部分，单击，原始日历关闭(好)，但它再次弹出(坏)。focus()对此似乎起到了某种作用，因为如果我编写了一个没有最后一个focuse的简单datepicker，一切都很好，但为了动态处理AJAX生成的行，我必须使用focus()。

如果我手动输入日期，然后按Enter键，一切都很好。此外，火狐运行良好，但我们需要支持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查看blow。生成的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
        });
    });
}

我想这会对你有帮助的。