如果是移动设备，请更改输入类型的值

Question

Guys I'm using jquery UI library for date picking and time picker addon. All work on PC but I want to change input type from text to date or time .

When I test on mobile device I want mobile to use default datetime picker(scroller).

By default I just use simple code for showing dialogs

$('.datepicker').datepicker();
$('.timepicker').timepicker();

So is it possible to check if it is a mobile device? If yes change type to date or time.

I try to create function which will detect if a user connect with mobile device but it doesn't work

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      var date = document.getElementById('datepicker');
      date.setAttribute('type','date');
}

But this function work when I check if it is mobile

function isMobile() { return ('ontouchstart' in document.documentElement); }

Here is full working code:

<script>
    (function() {
        var date = $(".datepicker");
        var time = $(".timepicker");
        var isTouchDevice = 'ontouchstart' in document.documentElement;

         if ( isTouchDevice ) {
             date.attr("type", "date");
             time.attr("type", "time");

        } else {
             date.attr("type", "text");
             $('.datepicker').datepicker();
             $('.timepicker').timepicker();
        }

    })();

</script>

Answer 1

You could check for all touch devices like this:

var isTouchDevice = 'ontouchstart' in document.documentElement;
if ( isTouchDevice ) {
  // do mobile handling
  var date = $('.datepicker');
  date.attr('type','date');
} else {
  // do default handling
}