none
Windows Phone 7 support of JQuery datepicker RRS feed

  • Question

  • I am using adaptive web design to adjust the contents and layout of my forms for each browser and one of my pages had a datepicker and a timepicker. The datepicker is the standard datepicker control in the JQuery UI framework and works in all tested browers (IE7+ (desktop), Chrome, FF, Android Web Browser, iTouch and iPad Web Browser) but not in the Windows Phone 7 browser.

    Specifically when I select the datepicker control the calendar selector pops up and looks just like all other browsers but when I select a date the calendar stays up, does not fill in the field but does show the day I selected. Also the paging from one month to another does not work, you can only select from dates in the current month.

    The timepicker control I am using has simiiar features and utilizes the same JQuery UI framework js files as that of the datepicker but selecting a time does result in the expected behavior (hiding the timepicker control and filling in the selected time). 

    As a side note although I navigated to this entry form and the URL has 'windowsphone' as the category it is not available as a selection option so I apologize if this is posted to the wrong section.

    Thursday, February 23, 2012 4:47 PM

Answers

  • Hi,

    Perhaps you are using master pages in your project (hence you left the ~ in your script links in pasted sample)

    in asp.net master pages you need to specify the absolute uri to your <script> tags...

    eg. <script type="text/javascript" scr='<% resolveURL("~/scripts/jQuery/JQuerymin.js")%>'></script>

    Here is part of the <head> that I use for a mobile layout page written with vanilla xhtml5

    <!DOCTYPE html>
    <html dir="ltr" id="oHtml" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="height:700px" >
    <head>
    	<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    	<script type="text/javascript" src="jquery.corner.js"></script>
    	<script type="text/javascript" src="jquery.textshadow.js"></script>
    	<script type="text/javascript">
    		document.createElement('section');
    		document.createElement('nav');
    		document.createElement('aside');
    	</script>


    the google ajax api links (with the 1 in the path) always returns the latest version (1.7.1) .... strange, I thought it was up to 1.9 the last time I looked...


    Rob^_^

    Hi,

    You can easily test your asp.net web apps in IE9 desktop.

    Merge these custom UAS strings to your registry

    Windows Registry Editor Version 5.00
    
    [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\IEDevTools\Options\UAString\Custom]
    "iPad"="Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) version/4.0.4 Mobile/7B367 Safari/531.21.10"
    "iPhone"="Mozilla/5.0 (iPhone; U; XXXXX like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/241 Safari/419.3 "
    "Windows Phone"="Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0;)"
    "Safari"="Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
    

    Open Ie9 , then F12(Developer Tool)>Tools>Change User Agent String>Windows Phone

    then navigate to your test web site on your local host....

    Some web sites do not bother with server side UAS sniffing to redirect 'mobile' web browsers and just use a sub domain instead...

    eg.

    m.mushtix.com.au (an asp.net site with a jQuery.mobile enhanced layout)

    m.seek.com.au (vanilla html with a jQuery enhanced 'mobile' layout and select boxes)

    m.bing.com (a generic mobile layout for bing.... use a different UAS with the developer tool to return different customized layouts for bing 'mobile' sites)

    If you test in your desktop IE9 then you can use the Developer tool to inspect and debug your layout and scripts... which you can't do with the Windows Phone Emulator.

    Regards.

    Tuesday, February 28, 2012 2:40 AM

All replies

  • Hi,

    the jQuery.Mobile examples work fine in windows 7 Phone emulator....

    What jquery version are you using....1.9 is the latest.

    When asking questions in this forum, it is helpful if you can provide a link to your website or a mashup that we can have a look at...

    My second guess would be that you are using absolutely positioned elements. the default behavior in mobile devices is to scroll the viewport to the top of the currently active input control when it receives focus.

    Of coarse you are using a html5 DTD and have validated your markup...

    Regards.


    Rob^_^

    Saturday, February 25, 2012 1:49 AM
  • Thanks for the reply. Below is a simplified example code chunk of the datepicker control in the JQuery UI framework. As I'm sure you will agree an emulator isn't always a true representation of how code will function on the real phone. In this case we are testing with a real Windows 7 phone and not an emulator. The datepicker control is in the JQuery UI framework, not from JQM but perhaps that is the answer as it may be more platform agnostic. I am using JQuery version 1.7.1, after verifying their site this morning that looks to be the latest released stable build. Please let me know if you have any ideas. Thanks.


    <!DOCTYPE html>
    <html>
    <head>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/JqueryUi/jquery-ui-1.8.17.custom.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/JqueryUi/jquery.ui.core.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/JqueryUi/jquery.ui.button.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#beginTimeOff").datepicker({
                showOn: "button",
                buttonImage: 'calendar.gif',
                buttonImageOnly: true,
                minDate: 0,
                onClose: function (dateText, inst) {
                    $(this).attr("disabled", false);
                },
                beforeShow: function (input, inst) { $(this).attr("disabled", true); }
            });
        });
    </script>
    </head>
    <body>
      <input type="text" id="beginTimeOff" name="beginTimeOff" placeholder="Begin"/>
    </body>
    </html>

    Monday, February 27, 2012 2:07 PM
  • Hi,

    please povide a web link. or use absolute uri's to the jQuery resources.... ~ is an asp.net directive.

    You haven't validated your markup.... <title> IS REQUIRED, <input> elements MUST be in a <form> block.

    http://jqueryui.com/demos/datepicker/ works fine in the Windows Phone Emulator...

    There are a number of different plugins available.. https://www.google.com/search?q=datepicker%20jQuery that are locale/culture dependant...your symptoms sounds like a ui.culture issue.

    Regards.


    Rob^_^

    Tuesday, February 28, 2012 12:20 AM
  • Hi,

    Perhaps you are using master pages in your project (hence you left the ~ in your script links in pasted sample)

    in asp.net master pages you need to specify the absolute uri to your <script> tags...

    eg. <script type="text/javascript" scr='<% resolveURL("~/scripts/jQuery/JQuerymin.js")%>'></script>

    Here is part of the <head> that I use for a mobile layout page written with vanilla xhtml5

    <!DOCTYPE html>
    <html dir="ltr" id="oHtml" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="height:700px" >
    <head>
    	<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    	<script type="text/javascript" src="jquery.corner.js"></script>
    	<script type="text/javascript" src="jquery.textshadow.js"></script>
    	<script type="text/javascript">
    		document.createElement('section');
    		document.createElement('nav');
    		document.createElement('aside');
    	</script>


    the google ajax api links (with the 1 in the path) always returns the latest version (1.7.1) .... strange, I thought it was up to 1.9 the last time I looked...


    Rob^_^

    Hi,

    You can easily test your asp.net web apps in IE9 desktop.

    Merge these custom UAS strings to your registry

    Windows Registry Editor Version 5.00
    
    [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\IEDevTools\Options\UAString\Custom]
    "iPad"="Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) version/4.0.4 Mobile/7B367 Safari/531.21.10"
    "iPhone"="Mozilla/5.0 (iPhone; U; XXXXX like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/241 Safari/419.3 "
    "Windows Phone"="Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0;)"
    "Safari"="Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
    

    Open Ie9 , then F12(Developer Tool)>Tools>Change User Agent String>Windows Phone

    then navigate to your test web site on your local host....

    Some web sites do not bother with server side UAS sniffing to redirect 'mobile' web browsers and just use a sub domain instead...

    eg.

    m.mushtix.com.au (an asp.net site with a jQuery.mobile enhanced layout)

    m.seek.com.au (vanilla html with a jQuery enhanced 'mobile' layout and select boxes)

    m.bing.com (a generic mobile layout for bing.... use a different UAS with the developer tool to return different customized layouts for bing 'mobile' sites)

    If you test in your desktop IE9 then you can use the Developer tool to inspect and debug your layout and scripts... which you can't do with the Windows Phone Emulator.

    Regards.

    Tuesday, February 28, 2012 2:40 AM