Search code examples
datepickerxpagesxpinc

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

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.

  1. 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.
  2. Date picker icon is displaying right side instead of left side.
  3. 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?

Solution

  • 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