datepicker - 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 , find following bugs date/time picker.
given default value date field.
- when viewing in xpinc,not able see default value in date field. on click of date picker icon, default value showing up. may because dafault value on laid behind date picker icon.
- date picker icon displaying right side instead of left side.
- once pick date, not able view date picker icon 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, default values coming fine , picker icon aligned properly. when preview in ibm notes 9 (xpinc), default value not showing in field. ui of date field looks bad! refer following link
seems problem notes 9 client.
i have tried again same thing in notes 9 client. source code 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 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 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 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&@ib&2tcxsp.css&2tcxspltr.css&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&@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&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 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:"mmm d, yyyy",timepattern:"h:mm:ss a",selector:"date"}"></td> </tr> <tr><td><span id="view:_id1:label3" class="xsptextlabel">please enter 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 not valid date.")); }); </script> <input type="hidden" id="xspbridgein"> <input type="hidden" id="xspbridgeout"> </body> but still facing same issue. date field not aligned properly
https://www.dropbox.com/s/9bmj3nmcbwy1cxd/datepicker.jpg
i using notes 9 client , xp machine.
is problem notes client?
adding following css in xpage, can resolve alignment issue of date picker in notes 9 xpinc.
<style type="text/css"> .xspinputfieldeditbox > div { width:auto; } </style> your source code 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 change of theme such 1 ui v2, 2.1, web standard can resolve issue
Comments
Post a Comment