IE Compatibility mode creates issues with XPages DateTimePicker

Question

Per Henrik suggested a fix for the strange stretched dialog problems in IE with xPage extensions.

Fixing "stretched" XPage extension library Name Picker in IE?

This worked great and fixed the problem. But it creates an issue with the DateTimePicker. With compatibility mode in place the calendar for the DateTimePicker displays but is immediately closed. I have put together a demo here:

 <xp:this.beforeRenderResponse>
    <![CDATA[#{javascript:  if (context.getUserAgent().isIE()) {
    var response = facesContext.getExternalContext().getResponse();
    response.setHeader("X-UA-Compatible", "IE=8");
}}]]>
</xp:this.beforeRenderResponse>




<xp:inputText id="inputText1">
    <xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
    <xp:this.converter>
        <xp:convertDateTime type="date"></xp:convertDateTime>
    </xp:this.converter>
</xp:inputText>

score 3 · Answer 1 · answered May 21 '12 at 14:34

I have stumbled into the exact same problem. My fix is inspired by a blog post by Paul Withers on the subject and involves using the Dojo DateTextBox and TimeTextBox for IE.

I use standard date fields:

<xp:inputText id="FejlDato" value="#{document.FejlDato}">
    <xp:this.converter>
        <xp:convertDateTime type="date"></xp:convertDateTime>
    </xp:this.converter>
    <xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>

And add a theme id to time fields in order to target them in a theme:

<xp:inputText id="FejlTid" value="#{document.FejlTid}">
    <xp:this.converter>
        <xp:convertDateTime type="time"></xp:convertDateTime>
    </xp:this.converter>
    <xp:this.themeId><![CDATA[${javascript:if (context.getUserAgent().isIE()) { "InputField.TimePicker" }}]]></xp:this.themeId>
    <xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>

I then use the following in a theme to use dijit.form.DateTextBox and dijit.form.TimeTextBox for IE instead of the standard XPages date and time pickers:

<!-- DatePicker for IE8 and IE9 -->
<resources>
    <dojoModule rendered="#{javascript:context.getUserAgent().isIE()}">
        <name>dijit.form.DateTextBox</name>
     </dojoModule>
     <dojoModule rendered="#{javascript:context.getUserAgent().isIE()}">
        <name>dijit.form.TimeTextBox</name>
     </dojoModule>
</resources>
<control>
    <name>InputField.DateTimePicker</name>
    <property>
        <name>dojoType</name>
        <value>#{javascript:context.getUserAgent().isIE()?'dijit.form.DateTextBox':''}</value> 
    </property>
</control>
<control>
    <name>InputField.TimePicker</name>
    <property>
        <name>dojoType</name>
        <value>#{javascript:context.getUserAgent().isIE()?'dijit.form.TimeTextBox':''}</value> 
    </property>
</control>

I have used a similar work-around based on Paul's suggestion in the past. The theme approach is a nice idea. — pipalia, May 21 '12 at 15:50
I simply used the dojo date picker and it seemed to work for me. No reason to get themes involved. — Bruce Stemplewski, May 22 '12 at 17:37
Great to hear that it works for you. Remember to accept answers to your questions :-) — Per Henrik Lausten, May 22 '12 at 17:55

score 1 · Accepted Answer · answered May 29 '12 at 20:25

1

I simply used the dojo date picker and it seemed to work for me. No reason to get themes involved.

answered May 29 '12 at 20:25

Bruce Stemplewski

1,343
1
23
66

score 1 · Answer 3 · edited Nov 21 '12 at 08:16

1

IE9 works fine, but if you turn on compatibility mode it doesn't... IE Science fiction

edited Nov 21 '12 at 08:16

S.L. Barth is on codidact.com

8,198
71
51
66

answered Nov 21 '12 at 07:53

Dave

19
1

IE Compatibility mode creates issues with XPages DateTimePicker

3 Answers3