Question

我正在使用IE7（必须），Java Server Faces 1.2，最新版本的jQuery datepicker，用于动态生成数据行的位置。还需要支持用户手动输入日期。 Datepicker工作正常，如果不是manully输入日期。奇怪的行为是当用户键入日期时，然后你将鼠标移动到窗口的任何部分，点击，orignal日历关闭（好），但然后它再次弹出（坏）。似乎focus（）的事情对此起了一定的作用，因为如果我写一个没有最后一个焦点的简单的datepicker，事情就好了，但为了动态处理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
        });
    });
}

我认为这会对你有帮助。

jQuery datepicker弹出两次

1 个答案: