p:日历多日期选择答案

【问题标题】：p:calender multiple date selectionp:日历多日期选择
【发布时间】：2012-07-07 12:06:49
【问题描述】：

我正在尝试使用 p:calender(primefaces 3.3) 实现多种日期选择功能，以这种方式。

<p:calendar  id="cal" showButtonPanel="true"  mode="inline"
    value="#{bean.dates}" selection="multiple"/>

在 Backing bean 中，我以这种方式将日期作为数组：

private Date[] dates;
public Date[] getDates() {
    return dates;
}

public void setDates(Date[] dates) {
    this.dates = dates;

}

但仍然无法选择多个日期。

根据这个博客http://blog.primefaces.org/?p=391 它可以工作。

我尝试以相同的方式实现。但没有奏效。为什么会这样？

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

你看到的博文已经过时了，当时primefaces的日历依赖于YUI，而现在它基于Jquery UI datepicker（不支持多选）

所以您无法使用 primefaces 当前日历实现多个日期选择，但您可以谷歌一下并找到其他基于 jquery 的替代方案，

例如jQuery UI Datepicker - Multiple Date Selections

【讨论】：

【解决方案2】：

没有默认功能，但这是使用 2 个内联日历的解决方案

<p:commandButton id="test" type="button"/>                                  
<p:overlayPanel for="test">
    <p:outputLabel styleClass="ui-grid ui-grid-responsive">
        <div class="ui-grid-row">
            <div class="ui-grid-col-6">
                <p:calendar id="start" value="#{myModel.start}" navigator="true" pattern="dd/MM/yyyy" mode="inline">
                    <p:ajax event="dateSelect" update="end"/>
                </p:calendar>       
            </div>
            <div class="ui-grid-col-6">
                <p:calendar id="end" value="#{myModel.end}" navigator="true" pattern="dd/MM/yyyy" mode="inline" mindate="#{myModel.start}"/>        
            </div>
        </div>
    </p:outputLabel>                                    
</p:overlayPanel>

【讨论】：