Creating Textfield of type date for android

Question

I am creating a HTML5 app for android.

I am using jQuery mobile with following headers:

<link rel="stylesheet" href="../../lib/jquery.mobile-1.3.0.min.css" />
<script src="../../lib/jquery-1.8.2.min.js"></script>    
<script src="../../lib/jquery.mobile-1.3.0.min.js"></script>

and I add the input field as described at jQuery mobile's demo site:

<input type="date" data-clear-btn="false" name="date-1" id="date-1" value="">

However, instead of the datepicker I just get a textbox.

Am I missing something?

Answer 1

First only Chrome will show datapicker component. Other desktop browsers will fail so don't rely on this implementation.

Second thing, jQuery Mobile don't have datepicker component. So you will need to use a 3rd party plugin. Don't rely on jQuery UI datepicker plugins because they are not optimized for mobile usage.

Better use some of there 3rd party jQuery Mobile plugins:

Datebox

and

Mobiscroll

Here are some of my answers and examples how to use jQM datapickers:

How to show datepicker on field focus only?

Datepicker for jQuery mobile (Android)

Answer 2

Only certain browsers will show the date picker. This post may be useful for you to detect if it will or not:

HTML5 Type Detection and Plugin Initialization

If the browser doesn't support the datepicker then you could add a custom jquery ui datepicker

Answer 3

Of course that is a text field you need to initialize the date picker:

and you need one jquery ui library:

  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>


$(document).on('pageinit', function(){
    $("#date-1").datepicker();
});

Try this out and see if helps.