Notes/Domino XPages Development Forum - Date picker format lost in mobile client

Apr 18, 2012, 6:43 AM

16 Posts

Re: Date picker format lost in mobile client

If coding for iPhones you will be able to use the "builtin" date picker by setting the type property to "date" (under all properties - basics for the field). This probably asumes that you use the mobile theme). I would expect this to work equally for Android devices.

You could learn more about developing mobile apps by attending the webinar: https://www1.gotomeeting.com/register/533899824 - which is TODAY...

/John

~Anita Minasterings

Apr 18, 2012, 1:18 PM

298 Posts

*The HTML 5 input type for the date picker is iOS only

~Sean Xanfoopuloopsi

Apr 19, 2012, 4:38 AM

4 Posts

Re: Date picker format lost in mobile client

I am using following code in a Xpage which is using mobile theme. Format for Date picker is still lost for IPad!.

<?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">

   <xe:singlePageApp id="singlePageApp1" selectedPageName= "Home">
       <xe:appPage id="appPage1" pageName="Home">
           <xp:table style="width:485.0px">
               <xp:tr>
                   <xp:td>

                       Native Date Picker
                   </xp:td>
                   <xp:td>
                       <xp:inputText id="inputText1" type="date">
                           <xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
                           <xp:this.converter>
                               <xp:convertDateTime type="date"></xp:convertDateTime>
                           </xp:this.converter>
                       </xp:inputText>
                   </xp:td>
               </xp:tr>
               <xp:tr>
                   <xp:td>
                       ------------------------------------------
                   </xp:td>
                   <xp:td>
                       ------------------------------------------
                   </xp:td>
               </xp:tr>
               <xp:tr>
                   <xp:td>Dojo Date Picker</xp:td>
                   <xp:td>
                       <xe:djDateTextBox id="djDateTextBox1"
                           type="date">
                       </xe:djDateTextBox>
                   </xp:td>
               </xp:tr>
           </xp:table>
           </xe:appPage>
</xe:singlePageApp>


</xp:view>

You can see the view source of the page and the iphone.css being used

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js" djConfig="locale: 'en-us', parseOnLoad: true"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.6.1/ibm/xsp/widget/layout/layers/xspClientDojo.js"></script>
<script type="text/javascript">dojo.require('dojo.parser')</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.6.1/dojox/mobile/themes/iphone/iphone.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customMobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customIphone.css">
<script type="text/javascript">dojo.registerModulePath('extlib', '/xsp/.ibmxspres/.extlib');</script>
<script type="text/javascript">dojo.require('extlib.dijit.Mobile')</script>
</head>
<body>
<form id="view:_id1" method="post" action="/MobileTe.nsf/m_Test2.xsp" enctype="multipart/form-data">
<div dojoType="extlib.dijit.mobile.Application" class="singlePageApp" selectedAppPage="Home"></div><div pageName="Home" id="Home" dojoType="extlib.dijit.mobile.View"><div id="view:_id1:appPage1_content"></div>
</div>

<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!d55fnyotra!">
<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>
</body>
</html>

~Sean Xanfoopuloopsi

Apr 19, 2012, 4:40 AM

4 Posts

Re: Date picker format lost in mobile client

~Ben Asaponeskioden

Apr 19, 2012, 8:23 AM

126 Posts

Re: Date picker format lost in mobile client

The date time picker currently doesn't work on the mobile applications. Also the HTML 5 input type "date" is only supported by IOS 5, android currently does not support it at all.

~Sean Xanfoopuloopsi

Apr 20, 2012, 8:48 AM

4 Posts

Re: Date picker format lost in mobile client

Thanks for the specific answer different from answers ranging from changing the type of native control to "date", "datetime" etc to date picker works only on iOS and not on android. For helping others who are grappling with same issue, my answer is that "Date picker format is lost when mobile theme is used on iPad" and the reason for same is "Tundra.css" not getting loaded for mobile theme. If you can find a way to modify the mobile theme to include date picker style, it might work. As of now I have decided to use spinwheel style shared in openntf. I will also give a try upgrading Ipad to iOS5 and test date picker format.