如何在客户端 set/format p:calendar 的日期？

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 and/or 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 我无法想象这些模式可能存在兼容性冲突，因为 primefaces 是建立在 jQuery 之上的，不是吗？

附加问题：一旦设置了日历的值（例如，通过手动从日期选择器中选择一个日期），输入组件的值属性就会正确更新，但日历仍然显示旧值。

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

如何在客户端 set/format p:calendar 的日期？

How to set/format the date of p:calendar on client side?

javascript

jquery

jsf