将 JQuery 日期选取器保存到 Bean 中的多个字段 (d/m/y）

Saving JQuery Datepicker to Multiple Fields (d/m/y) in Bean

本文关键字：字段 选取 日期 JQuery 保存 Bean      更新时间：2023-09-26
一般来说，

我是一个超级初学者，如果我的问题令人困惑，我很抱歉。我正在尝试更新遗留代码前端以使用 JQuery 日期选择器而不是旧的下拉菜单。后端代码(我不应该更改(使用日、月和年的字符串变量。我正在尝试使用以下 js 将日期选择器中的值直接保存到 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的例子，但这个项目没有使用它。

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

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

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());

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

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

没用。在这里，您可以看到一个 HTML/JQuery 的示例。它不应该有那么不同

相关文章：