CODEWITHSUNDEEP
javascriptdojoxpageslotus-notes
user1358852
user1358852

Reputation:

XPages - compare values from two Dojo Time Text Boxes

I have an XPage with 2 Dojo Time Text Boxes. Before submitting, I want to check that the start time is earlier than the end time. While using the ">" operator works in most cases, it does not work if the start date has two digits in the hour value and the end date has just one digit (times display using AM and PM). Here is my code:

<xe:djTimeTextBox id="EventStartTime" value="#{document1.EventStartTime}" />
<xe:djTimeTextBox id="EventEndTime" value="#{document1.EventEndTime}" />

var startD = "#{id:EventStartTime}";
var endD = "#{id:EventEndTime}";
var startVal = dojo.attr(startD,"value");
var endVal = dojo.attr(endD,"value");
if (startVal > endVal) {alert("Start later than End!");return false;};

For example, this comparison will not work if Start Time is 10:15 AM and End Time is 9:30 AM.

Upvotes: 0

Views: 414

Answers (1)

Michael Saiz
Michael Saiz

Reputation: 1640

I often have to use date/time boxes for users to select meetings, events or other things with Durations where the starttime is not allowed to be later then the end time. For those i use this Code:

<xp:this.resources>
    <xp:dojoModule name="dijit.form.TimeTextBox"></xp:dojoModule>
</xp:this.resources>

Start Time:
<xp:inputText id="mtgTime1" style="width:160px;" role="button"
    title="used to pick a meeting time" required="true"
    dojoType="dijit.form.TimeTextBox">
    <xp:this.dojoAttributes>
        <xp:dojoAttribute name="onChange">
            <xp:this.value><![CDATA[#{javascript:return "dijit.byId('"+getClientId('mtgTime2')+ "').constraints.min = arguments[0];"}]]></xp:this.value>
        </xp:dojoAttribute>
    </xp:this.dojoAttributes>
</xp:inputText>
<br></br>
End Time:
<xp:inputText id="mtgTime2" style="width:160px;" role="button"
    dojoType="dijit.form.TimeTextBox">
    <xp:this.dojoAttributes>
        <xp:dojoAttribute name="onChange">
            <xp:this.value><![CDATA[#{javascript:return "dijit.byId('"+getClientId('mtgTime1')+"').constraints.max = arguments[0];"}]]></xp:this.value>
        </xp:dojoAttribute>
    </xp:this.dojoAttributes>
</xp:inputText>

This will create two dojo TimeBoxes mtgTime1 and mtgTime2 both will have a Dropdown list wich lets the user select Time Values but if the first one is selected the secound is not allowed to be set to a higher value by using the dojo function contraints.min and contraints.max.

For more Information take a look at dijit.form.TimeTextBox.

This kind of validation works for DateTimeBox as well.

Update: Don't forget to set dojoForm="true" dojoTheme="true" dojoParseOnLoad="true".

Upvotes: 1

Related Questions