Issues with input type date in cordova app

Question

I am using input type=date to capture a date from user. Because we cannot have placeholder for input(type=date), I have done the following:

created the input field with Type text with a placeholder
in JS, on focus, changing the type to date

$("#datefield").on('focus', function() { $("#datefield").attr('type', 'date'); })

In IOS, this is working perfectly fine and brings the native datepicker everytime I tap on the input field. But in android, it brings the native datepicker but I have to click twice. After debugging, I found on first, it goes through the focus event and change the type to date. On second click, it doesn't go through the event, but brings the native keyboard. After that as long as I stay on that page, because the type has been changed to date, it will bring the native datepicker on one click.

Am I handling it the right way? What am I doing wrong? Is there any better way of doing it?

P.S. I want to avoid plugins as long as I can. I am using, HTML, CSS, JS, Jquery

PraveenKumar PraveenKumar · Accepted Answer · 2017-09-25T08:02:47

Try to use onfocus attribute to change the text field to date field.

I hope this helps you...

<input placeholder="Date" type="text" onfocus="(this.type='date')" id="date">

or use jquery

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="date" type="date" placeholder="Date">

Issues with input type date in cordova app

1 Answers