Question

我正在尝试为我的项目制作时间和日期选择器。我想要时间和日期选择器我将使用一个插件，但这仅适用于桌面浏览器，当它将在移动设备上浏览时，它将触发移动本机时间/日期选择器。我正在寻找那种类型的插件，但我还没有得到它。如果你们知道那么请告诉我。我尝试做一些添加/删除类的操作取决于屏幕大小。它添加和删除了类，但插件没有被触发。

贝洛是我的代码

https://codepen.io/pagol/pen/MOzVMP

HTML

<div class="datepicker test">
<input type="date" class="change" id="myinput">
</div>

JS

jQuery(document).ready(function(){

  TinyDatePicker('.test input');

}); 

$(function(){

$(window).bind("resize",function(){
    console.log($(this).width())
    if($(this).width() <500){
    $('.datepicker').removeClass('test').addClass('red')
    }
    else{
    $('div').removeClass('red').addClass('test')
    }
})
})

Answer 1

您可以使用Modernizr的自定义版本：

（您只需要包含输入类型字段）。

if (!Modernizr.inputtypes.date) {
  jQuery(document).ready(function(){    
    TinyDatePicker('.test input');    
  }); 
}

这将检查浏览器是否具有对输入type="date"的本机支持。如果没有，那么它将使用您的自定义日期选择器。

Answer 2

添加课程后，您必须触发TinyDatePicker（我不知道）。在这里，您只需添加类而不附加TinyDatePicker：

var dp = null;
attachDatePicker = function(){
    if(dp === null || typeof dp === 'undefined')
        dp = TinyDatePicker('.test input');
}

$(function(){
    $(window).bind("resize",function(){
        console.log($(this).width())
        if($(this).width() <500){
            $('.datepicker').removeClass('test').addClass('red');
            //you should alsa remove TinyDatePicker here
            if(dp !== null){
                dp.destroy();
                dp = null;
            }
        }
        else{
            $('div').removeClass('red').addClass('test');
            attachDatePicker();
        }
    });
});

jQuery(document).ready(function(){
  attachDatePicker();
});

Answer 3

最后我能够解决我想做的事情。所以现在如果在移动设备中加载它将触发本机选择器，如果桌面/笔记本电脑中的浏览器将触发日期选择器js。

此处的实时代码codepen.io/pagol/pen/MOzVMP

仅适用于移动设备的输入日期

3 个答案: