CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromedatepicker
lappet
lappet

Reputation: 114

How to avoid double datepicker appear on google chrome

Without that class ( datepicker ), google chrome has shown datepicker widget, but not in firefox. So i add that class ,its scripts and style. This work fine on firefox, but two datepickers widget appear on google chrome and thats jquery's datepicker widget can't use as date form input..

Here is a part of my code:

<div class="form-group">
    <label class="control-label col-sm-2">Tanggal lahir :</label> 
        <div class="col-sm-10">
            <input type="date" class="form-control datepicker" name="tglLahir">
        </div>
</div>
<link rel="stylesheet" type="text/css" href="../js/jquery-ui.css">
<script type="text/javascript" src="../js/external/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript">
    $( ".datepicker" ).datepicker();
</script>
</div>

Screenshot : screenshot

Sorry for bad english

Upvotes: 3

Views: 5268

Answers (2)

Luigi De Rosa
Luigi De Rosa

Reputation: 720

According to caniuse (http://caniuse.com/#feat=input-datetime) the input type "date" is not working on Firefox, that's why on Chrome you see the double datepicker (the first one from the native picker implemented in the browser, the other one from jquery datepicker).

The quickest solution is to replace type="date" to type="text"

edit: another solution, without change the input type, is to add this CSS rule:

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator {
   display: none;
}

basically it will hide the spin button and the picker indicator, so, it should be not possible to open the native datepicker.

Upvotes: 5

soktinpk
soktinpk

Reputation: 3888

Change type="date" to type="text".

This is because chrome automatically recognizes type="date" and automatically provides a native date picker for you.

You could do that or remove the datepicker code, in which case you would be left with <input type="date"> and in firefox, which doesn't support the native date picker, you would not see anything.

Upvotes: 4

Related Questions