CODEWITHSUNDEEP
javascriptjquerycssmobiledatepicker
punisher
punisher

Reputation: 11

Disable jQuery datepicker on mobile, input type="date"

I have a small problem with detection and disable jQuery date picker in mobile phones. I have this JavaScript code (enable datepicker):

$( "input[type='date']" ).datepicker();

And CSS (hide Chrome native datepicker):

input::-webkit-calendar-picker-indicator{ display: none;}
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important;}

On the desktop, this works fine, but on mobiles, two date pickers are displaying. I want hide jQuery Datapicker, but avoid scripts like Modernizr.

Maybe someone can help me with some CSS or little JavaScript?

example code: 

<!DOCTYPE>
<html>
<head>
<title> Datepicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
input::-webkit-calendar-picker-indicator{ display: none;}
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important;}

</style>
</head>
<body>
    <form>
    <input type="date" />
    </form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script>
 $(function() { 
  $( "input[type='date']" ).datepicker({
            dateFormat: "yy-mm-dd",
            firstDay: 1 }) 
});

</script>
</body>
</html>

I place this code here: http://www.stack.puniserv.pl/

I want to resign from jQuery date picker in mobile.

Upvotes: 1

Views: 2734

Answers (1)

Syden
Syden

Reputation: 8625

You can use CSS @media querys to hide elements on mobile viewports. Adjust breaking point to desired, 767px is used as example, so when viewport is above that it should be visible and when below hidden. Make sure you set the querys at the end of your CSS file.

@media (max-width: 767px) {
   input::-webkit-calendar-picker-indicator { 
      display: none; 
   }
   input[type="date"]::-webkit-input-placeholder { 
      visibility: hidden !important;
   } 
}

Upvotes: 1

Related Questions