xPages date field in IBM Notes 9, the Default value not showing and Picker Icon not aligned properly

Question

I have tested Xpage Application in Notes Client (xpinc) 9 and find the following bugs with Date/Time Picker.

Given default value for the Date field.

When viewing in the xpinc,not able to see the default value in the date field. On click of the Date picker icon, default value is showing up. This may be because dafault value is over laid behind the date picker icon.
Date picker icon is displaying right side instead of left side.
Once we pick the date, we are not able to view the date picker icon any more.

My code follows like,

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:inputText id="inputText1">
        <xp:this.defaultValue><![CDATA[#{javascript:@Date("16/12/2013")}]]></xp:this.defaultValue><xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
        <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
        </xp:this.converter>
    </xp:inputText>
    </xp:view>

When preview in web, the default values coming fine and picker Icon aligned properly. But when preview in IBM Notes 9 (xpinc), The default value not showing in the field. The UI of date field looks bad! Refer the following link

http://www-10.lotus.com/ldd/ndseforum.nsf/xpTopicThread.xsp?documentId=CA3D7B61284FEE3185257B6300352563

seems problem with Notes 9 client.

I have tried again same thing in Notes 9 client. My source code like below

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xp:this.beforeRenderResponse><![CDATA[#{javascript:viewScope.DateEntered = viewScope.DateEntered || @Yesterday()}]]></xp:this.beforeRenderResponse>
    <xp:table>
        <xp:tr>
            <xp:td>
                <xp:label value="Sample date input" id="label1"></xp:label></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Please enter a date:" id="label2"></xp:label></xp:td>
            <xp:td>
                <xp:inputText id="inputText1"
            value="#{viewScope.DateEntered}">
            <xp:this.converter>
                <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
            <xp:dateTimeHelper></xp:dateTimeHelper>
        </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Please enter some Text:" id="label3"></xp:label></xp:td>
            <xp:td>
                 <xp:inputText id="inputText2"
            value="#{viewScope.textEntered}">
        </xp:inputText></xp:td>
        </xp:tr>
    </xp:table>
</xp:view>

Html code in notes client like below

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/@Da&amp;@Ib&amp;2Tcxsp.css&amp;2TcxspLTR.css&amp;2TcxspRCP.css.css">
    <script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.0/dojo/dojo.js" djConfig="locale: 'en-us', parseOnLoad: true"></script>
    <script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/@Ie&amp;@Iu.js"></script>
    <script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientDojo')</script>
    <script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientRCP')</script>
    <script type="text/javascript">dojo.require('dojo.parser')</script>
    <script type="text/javascript">dojo.require('ibm.xsp.widget.layout.DateTextBox')</script>

    </head>
    <body class="xspView tundra">
    <form id="view:_id1" method="post" action="/xsp/Dev9!!ESI/Sprint55/AcctMgr.nsf/xpCombo.xsp?1367948337%3FOpenXPage&amp;xspRunningContext=Notes" class="xspForm" enctype="multipart/form-data">
    <table><tr><td><span id="view:_id1:label1" class="xspTextLabel">Sample date input</span></td>
    <td></td>
    </tr>
    <tr><td></td>
    <td></td>
    </tr>
    <tr><td><span id="view:_id1:label2" class="xspTextLabel">Please enter a date:</span></td>
    <td><input type="text" value="2013-05-06" id="view:_id1:inputText1" name="view:_id1:inputText1" class="xspInputFieldDateTimePicker" dojoType="ibm.xsp.widget.layout.DateTextBox" iconStyleClass="xspInputFieldDatePickerIcon" constraints="{datePattern:&quot;MMM d, yyyy&quot;,timePattern:&quot;h:mm:ss a&quot;,selector:&quot;date&quot;}"></td>
    </tr>
    <tr><td><span id="view:_id1:label3" class="xspTextLabel">Please enter some Text:</span></td>
    <td><input type="text" id="view:_id1:inputText2" name="view:_id1:inputText2" class="xspInputFieldEditBox"></td>

    </tr>
    </table>

    <input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!dgw1o52zpc!">
    <input type="hidden" name="$$xspsubmitid">
    <input type="hidden" name="$$xspexecid">
    <input type="hidden" name="$$xspsubmitvalue">
    <input type="hidden" name="$$xspsubmitscroll">
    <input type="hidden" name="view:_id1" value="view:_id1"></form>
    <script type="text/javascript">

    XSP.addOnLoad(function() {
    XSP.attachValidator("view:_id1:inputText1",null,new XSP.DateConverter("MMM d, yyyy","This field is not a valid date."));
    }); 

    </script>
    <input type="hidden" id="XspBridgeIn">
    <input type="hidden" id="XspBridgeOut">
    </body>

But still I am facing same issue. Date field not aligned properly

https://www.dropbox.com/s/9bmj3nmcbwy1cxd/DatePicker.jpg

I am using notes 9 client and Xp machine.

Is any problem with my notes client?

Add a source code snippet. Does that happen on an empty form too (with only one label and date field)? Did you use the extlib form controls? Highly recommended — stwissel
Its happening in simple x-page, where i have only one date field. I am not using any extension library control. I have used only date time picker from control pallet. The problem only in Notes 9 xpinc. — Mahendran Rathinam
If change Application theme to One UIV2, ONE UIV2.1, web standard, The date picker aligned properly and able to see good in xpinc. But if Application theme is server default or One UI, it looks bad in xpinc. — Mahendran Rathinam
Fix your server default then :-) Interesting - I need to check if I played with the theme in my test database — stwissel
Cant update server default theme. it may affect other application too. — Mahendran Rathinam

Mahendran Rathinam Mahendran Rathinam · Accepted Answer · 2013-05-11T11:10:24

Adding the following Css in to xpage, can resolve alignment issue of Date picker in Notes 9 xpinc.

<style type="text/css">
     .xspInputFieldEditBox > div {
  width:auto;
}
</style>

Your source code will be following

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <style type="text/css">
     .xspInputFieldEditBox > div {
  width:auto;
}
</style>

    <xp:inputText id="inputText1" value="#{viewScope.inputText1}"
        defaultValue="#{javascript:@Now()}">
        <xp:this.converter>
            <xp:convertDateTime type="date" />
        </xp:this.converter>
        <xp:dateTimeHelper />
    </xp:inputText>
    </xp:view>

Even with change of theme such as One UI V2, 2.1, web standard you can resolve this issue

xPages date field in IBM Notes 9, the Default value not showing and Picker Icon not aligned properly

2 Answers