Question

对于一般的Javascript / JQuery / HTML，我是一个超级初学者，如果我的问题令人困惑，请道歉。我尝试更新遗留代码前端以使用JQuery日期选择器而不是旧的下拉菜单。后端代码（我不应该改变）使用字符串变量表示日，月和年。我尝试使用以下js将datepicker中的值直接保存到bean中：

<script>
    $(function() {
        $(".datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            changeYear: true,
            changeMonth: true,
            onSelect: function(dateText, inst) { 
                var date = $(this).datepicker('getDate');
                document.getElementById('enterAppForm:effectiveDay').value  = date.getDate();  
                document.getElementById('enterAppForm:effectiveMonth').value = date.getMonth() + 1;              
                document.getElementById('enterAppForm:effectiveYear').value =  date.getFullYear();
            }
        });
    });
</script>

我将HTML作为（在<h:form id="enterAppForm">内部，还有很多其他内容）：

<h:inputText type="text" class="datepicker" id="effectiveDate" name="effectiveDate" />
<h:inputHidden id="effectiveDay" value="#{beanName.effectiveDay}" />
<h:inputHidden id="effectiveMonth" value="#{beanName.effectiveMonth}" />
<h:inputHidden id="effectiveYear" value="#{beanName.effectiveYear}" />

如果我这样做：

day  = date.getDate(),  
month = date.getMonth() + 1,              
year =  date.getFullYear();
alert(day + '-' + month + '-' + year);

值确实显示正确。但是，bean表明它为所有3个变量接收null的值。我确定有一些基本的东西我不理解，所以如果有人能指出我正确的方向，我真的很感激。我已经看过PrimeFaces的例子，但是这个项目并没有使用它。

P.S。在我弄清楚我的问题之后，这一步可能是微不足道的，但是验证js需要抓住var vEffectiveMonth = document.getElementById('enterAppForm:effectiveMonth');才能使它工作。它不应该是一个隐藏的领域，对吧？它之前与旧的下拉菜单相关联。

Answer 1

如果我理解正确，您正在使用此代码：

document.getElementById('enterAppForm:effectiveDay').value  = date.getDate();  
document.getElementById('enterAppForm:effectiveMonth').value = date.getMonth() + 1;              
document.getElementById('enterAppForm:effectiveYear').value =  date.getFullYear();

设置这些HTML元素的值：

<h:inputHidden id="effectiveDay" value="#{beanName.effectiveDay}" />
<h:inputHidden id="effectiveMonth" value="#{beanName.effectiveMonth}" />
<h:inputHidden id="effectiveYear" value="#{beanName.effectiveYear}" />

如果是这样，您的ID就不匹配了。由于您已经在使用jQuery，因此如果您只是这样做，您将不再需要担心浏览器的可比性：

$("#effectiveDay").val(data.getDate());
$("#effectiveMonth").val(date.getMonth() + 1);
$("#effectiveYear").val(data.getFullYear());

Answer 2

如果你看一下datpicker api，你可以看到OnSelect有一个inst参数。它包含您选择的日期。

var date = $(this).datepicker('getDate');

没用。在这里，您可以看到带有HTML / JQuery的example。它应该不是那么不同

在Bean

2 个答案: