Why can't I use two date picker components on a dialog?

Question

Here is an example xpage:

I am trying to put multiple date pickers on a dialog box from the extension library, i get this error...

Problem submitting area of page when I open the dialog... Tried to register widget with id==_Container but that id is already registered

I'm not sure why it can't be done, anyone had any luck with it.

Thanks

<xp:button id="button1" value="Show Dialog">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show();}]]></xp:this.action>
    </xp:eventHandler></xp:button>
<xp:button id="button2" value="Hide Dialog">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide();}]]></xp:this.action>
    </xp:eventHandler></xp:button>


    <xe:dialog id="dialog1">
    <xp:inputText value="#{doc1.field1}">
        <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
        </xp:this.converter>
        <xp:dateTimeHelper></xp:dateTimeHelper>
    </xp:inputText>
            <xp:inputText value="#{doc1.field2}">
        <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
        </xp:this.converter>
        <xp:dateTimeHelper></xp:dateTimeHelper>
    </xp:inputText>

</xe:dialog>

Answer 1

Neither of your xp:inputText controls have an id attribute.

If you add this attribute to the controls then both of the date pickers will work fine both inside and outside the dialog control.

If you were to move the two date pickers outside of the dialog box you would also notice that only the first date picker would get the dojo dropdown picker control

Answer 2

I would use this dialog instead, its a little more upfront work but you wont have that issue and it is faster to load

http://xpagesblog.com/XPagesHome.nsf/Entry.xsp?documentId=9BB0002FE3452618852578CB0066AB75