Question

首先是目前的情况。我有一个JSF页面，其中的日期就像这样呈现

<h:outputText value="#{bean[date]}" >
    <f:convertDateTime pattern="#{Const.CALENDAR_PATTERN}"/> 
        // contains a calendar pattern, here dd.MMM yyyy
</h:outputText>

在另一个位置有一个p:calendar输入组件，我想通过客户端点击按钮来设置此日历的值！

第一次硬编码尝试工作正常：

onclick="document.getElementById('calendar_id_input')
    .setAttribute('value', '21.Jan 2015');"

但是当我使用日期时，它来自bean，那么模式当然不匹配：

onclick="document.getElementById('calendar_id_input')
    .setAttribute('value', '#{bean[date]}');"

这已经呈现（如果日历会接受这种模式，也可以正常工作）：

onclick="document.getElementById('calendar_id_input')
    .setAttribute('value', 'Sat Jan 03 18:00:57 CET 2015');"

所以我尝试使用jQuery-datepicker格式化程序格式化日期，然后我在日历中设置值，如下所示：

onclick="document.getElementById('calendar_id_input')
    .setAttribute('value', $.datepicker
          .formatDate('#{Const.CALENDAR_PATTERN}', new Date( #{bean[date]} )  ) 
     );"

上次尝试中的完整呈现结果如下所示，但不起作用，即日历的值根本没有设置：

onclick="document.getElementById('calendar_id_input')
   .setAttribute('value', $.datepicker
       .formatDate('dd.MMM yyyy', new Date( Sat Jan 03 18:00:57 CET 2015 )  ) 
    );
 return false;;"

这里有什么问题，我该如何解决？不幸的是我对javascript和/或jQuery不太熟悉..

提前致谢！

根据BalusC的回答，我将我的代码更改为：

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', $.datepicker
.formatDate('#{Const.CALENDAR_PATTERN}', new Date(#{bean[date].time})));"

现在设置了日历的值，但无论我尝试哪种模式，结果都很奇怪。例如，我喜欢使用模式dd.MMM yyy，我有奇怪的结果03. JanuaryJan 2015 我无法想象可能存在与这些模式的相容性冲突，因为主要构建在jQuery上，不是吗？

其他问题：设置日历的值后（例如，通过手动从日期选择器中选择日期），输入组件的value-attribute会正确更新，但日历仍会显示旧值。

Answer 1

为了最终结束这个问题，我想与您分享我的解决方案。也许这对未来的其他人有帮助：

PrimeFaces组件p:calendar在客户端API中提供setDate功能。所以我现在使用的最终解决方案就是这样的

<p:calendar widgetVar="calendar_widget_name" />

<p:commandButton type="button"
    onclick="PF('calendar_widget_name').setDate(new Date(#{bean[date].time}));"
/>

Answer 2

以下代码段可以解决您的问题：

PF('widgetVariable').setDate(new Date(#{bean.getYourDate().time}));

如何在客户端设置/格式化p：日历的日期？

2 个答案: