Create a Multi-value date field using datepicker

Question

I'm trying to create a MV date field using the date picker, The closest I have been able to get is to use the date picker to store a date in a viewScope then have a button to Add the date to the existing MV Date field. It works (sort of) but seems to be a very awkward way of doing it. Did some searching and could not find anything any better. The field that I'm storing the values in must be editable so that can remove a value if need be, but not smooth at all. Any ideas?

Edit Aug 21 2015 Took part of Paul's answer and part of my solution but I'm having some issues with data typing. See the code below -- as it is it works fine and stores the list of dates in the viewScope.vsDates If you remove the // and added to the line viewScope.vsNames = tArray; //comment out this line and run the same process it fails at the line tArray.push(addDate) with the error message "Error in Add Date Error calling method 'push(java.util.Date)' on an object of type 'Date [JavaScript Object]'" So that once I retreive the values from the WFSMainDoc.getValue("ExpPayDate") the datatype has changed but not sure how to get around that part.

<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 -->

score 0 · Answer 1 · answered Aug 19 '15 at 23:17

0

How about a normal DatePicker bound to a requestScope variable that has an onBlur event to add the field to the datasource's field, refreshing the relevant component (see next sentence)? Then bind the datasource's field to a Dojo List Text Box (remembering to set it to multi-value), so allowing users to remove values, but avoiding having to handle the validation of multiple values?

It should present a very elegant solution, the only perceptible concern being that it makes it harder to change an individual date value.

answered Aug 19 '15 at 23:17

Paul Stephen Withers

15,699
1
15
33

Paul, see my edits to the original question above. I seem to be hitting a datatype issue but not sure how to resolve it. – Bill F Aug 21 '15 at 17:12
getValue() is probably getting a SSJS wrapper - obviously using a DateTime is not safe. getItemValueDate() may be what you need. – Paul Stephen Withers Aug 21 '15 at 20:02
Used a repeat control rather than the dojo text list that I could not get working. – Bill F Aug 22 '15 at 18:56

score 0 · Answer 2 · answered Aug 21 '15 at 13:39

0

Can you split the field's values into several temporary single-value fields?

answered Aug 21 '15 at 13:39

D.Bugger

2,300
15
19

score 0 · Accepted Answer · answered Aug 22 '15 at 18:55

after a lot more time than it should have taken I have worked out a very workable solution. I have a date picker boundy to a requestScope.addDate then an add button that stores the selected value in viewScope.vsDates as an array of dates. Also the add button sets the backend data to the viewScope.vsDates. Then add a repeat control that is populated by viewScope.vsDates the repeat control displays a button and the date value for each instance in the viewScope. The button on the repeat only displays if the document is editable, the button knows the position of the item to be removed so it removes it from the viewScope and resets the backend field. See the image below.

Create a Multi-value date field using datepicker

3 Answers3