使用日期选择器创建多值日期字段

Question

我正在尝试使用日期选择器创建一个 MV 日期字段，我能得到的最接近的方法是使用日期选择器将日期存储在 viewScope 中，然后有一个按钮将日期添加到现有的 MV 日期字段。它（有点）有效，但似乎是一种非常尴尬的方式。做了一些搜索，找不到更好的东西。我在其中存储值的字段必须是可编辑的，以便在需要时可以删除值，但一点也不平滑。有什么想法吗？

编辑 2015 年 8 月 21 日接受了 Paul 的部分回答和我的部分解决方案，但我在数据输入方面遇到了一些问题。请参阅下面的代码——因为它工作正常并将日期列表存储在 viewScope.vsDates 如果您删除 // 并添加到行 viewScope.vsNames = tArray; //注释掉这一行和运行它在行 tArray.push(addDate) 失败的相同过程，错误消息 "Error in Add Date Error calling method 'push(java.util.Date)' on an object of type 'Date [JavaScript Object]'" 因此，一旦我从 WFSMainDoc.getValue("ExpPayDate") 中检索值，数据类型已更改但不确定如何绕过该部分。

<xp:panel id="panelAddDates">
        Additional Display Dates :
        <xp:table>
            <xp:tr>
                <xp:td valign="top">

                    <xp:inputText id="AddDate" value="#{viewScope.vsAddDate}">
                        <xp:dateTimeHelper id="dateTimeHelper3"></xp:dateTimeHelper>
                        <xp:this.converter>
                            <xp:convertDateTime type="date" dateStyle="medium">
                            </xp:convertDateTime>
                        </xp:this.converter>
                    </xp:inputText>
                </xp:td>
                <xp:td valign="top">
                    <xp:button value="Add to list" id="button2">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="partial" refreshId="panelAddDates">
                            <xp:this.action><![CDATA[#{javascript:try{
print("Start Transfer date");
var addDate:NotesDateTime = viewScope.vsAddDate;
print("Got addDate " + addDate);
//var expPayDate = WFSMainDoc.getValue("ExpPayDate");
var expPayDate = viewScope.vsDates;
    if (addDate != null){
        if (expPayDate == null || expPayDate == ""){
            print("expPayDate is null")
            var tArray:Array = new Array;
            tArray.push(addDate);
            //WFSMainDoc.setValue("ExpPayDate" , tArray)
            viewScope.vsDates = tArray
            print("ExpPayDate in WFSMainDoc = " + WFSMainDoc.getValue("ExpPayDate"))
            print("ExpPayDate in viewscope = " + viewScope.vsDates)
        }else{
            var tArray:Array = new Array;
            //tArray = WFSMainDoc.getValue("ExpPayDate");
            tArray = viewScope.vsDates;
            print("Got tArray = " + tArray.toString());
            tArray.push(addDate);
            //WFSMainDoc.setValue("ExpPayDate" , tArray);
            viewScope.vsNames = tArray; //comment out this line
            //print("ExpPayDate in WFSMainDoc = " + WFSMainDoc.getValue("ExpPayDate"));
            print("ExpPayDate in viewScope = " + viewScope.vsDates);
        }
        viewScope.remove("vsAddDate")
        print("Done")
    }
}catch(e){
    print("Error in Add Date " + e.toString())
}}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                </xp:td>
                <xp:td valign="top">

                <xe:djextListTextBox id="djextListTextBox1"
                    value="#{WFSMainDoc.ExpPayDate}" multipleSeparator=";">
                </xe:djextListTextBox>
                </xp:td>
            </xp:tr>
        </xp:table>
        </xp:panel><!-- panelAddDates -->

Answer 1

绑定到具有 onBlur 事件的 requestScope 变量的普通 DatePicker 如何将字段添加到数据源的字段，刷新相关组件（见下一句）？然后将数据源的字段绑定到 Dojo 列表文本框（记得将其设置为多值），从而允许用户删除值，但避免必须处理多个值的验证？

它应该提供一个非常优雅的解决方案，唯一可察觉的问题是它使更改单个日期值变得更加困难。

Answer 2

你能把字段的值拆分成几个临时的单值字段吗？

Answer 3

在比应该花费的时间多得多的时间之后，我找到了一个非常可行的解决方案。我有一个日期选择器边界到 requestScope.addDate，然后是一个添加按钮，它将所选值存储在 viewScope.vsDates 中作为日期数组。此外，添加按钮将后端数据设置为 viewScope.vsDates。然后添加一个由 viewScope.vsDates 填充的重复控件，重复控件在 viewScope 中显示一个按钮和每个实例的日期值。重复按钮仅在文档可编辑时显示，该按钮知道要删除的项目的位置，因此它将其从 viewScope 中删除并重置后端字段。请参见下图。

使用日期选择器创建多值日期字段

Create a Multi-value date field using datepicker

datepicker

multivalue

xpages