Javascript 输入类型日期仅适用于手机

我正在努力为我的项目挑选时间和日期。我想使用时间和日期选择器，我将使用一个插件，但这仅适用于桌面浏览器，当它在移动设备上浏览时，它将触发移动本机时间/日期选择器。我正在寻找那种类型的插件，但我还没有弄明白。如果你们知道，请告诉我。我试图根据屏幕大小添加/删除类。它会添加和删除类，但不会触发插件

下面是我的密码

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')
    }
})
})

jQuery（文档）.ready（函数（）{
TinyDatePicker（“.测试输入”）；
}); 
$（函数（）{
$（窗口）。绑定（“调整大小”，函数（）{
console.log（$（this.width（））
如果（$（this）.width（），则可以使用以下自定义版本：

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

这将检查浏览器是否具有对输入的本机支持
type=“date”
。如果没有，则它将使用您的自定义日期选择器。
添加类后，您必须启动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();
}); 

var-dp=null；
attachDatePicker=函数（）{
如果（dp==null | |类型dp===‘未定义’）
dp=TinyDatePicker（'.test input'）；
}
$（函数（）{
$（窗口）。绑定（“调整大小”，函数（）{
console.log（$（this.width（））
如果（$（this）.width（）最终我能够修复我想要做的事情。因此，现在如果在移动设备中加载，它将启动本机选取器，如果在台式机/笔记本电脑中使用浏览器，它将启动日期选取器js

这里的实时代码
codepen.io/pagol/pen/MOzVMP
谢谢…很酷，这几乎可以工作了。它并不是真的不能测量TinyDatePicker或任何其他picker。如果你想在任何地方尝试实时，你可以使用任何其他picker。我有另一个类似桌面的想法，我们可以将输入类型date更改为text，将移动视图类型更改为date..你不喜欢吗hink？还没有测试，但我更新了我的代码（在快速阅读这里的文档之后），试试这样的东西。酷…超级酷…几乎可以工作…有一件事还不起作用..那就是当它加载到移动插件中时仍然启动，但如果屏幕大小从桌面到移动大小，那么工作正常。我将在真实的移动设备中进行测试..我想我们需要做一些事情，比如在移动视图中加载时，插件也不会启动。当前我t由defaultCheck触发，如果客户端是带有“if（typeof window.orientation！=='undefined'）{…}”的移动设备对我来说，看起来比大小更好。谢谢，我正在尝试。很多时候，首先需要修复onload。手机将不启动插件，桌面将启动。谢谢。实际上，我有意在手机中启动本机日期和时间选择器。因为手机用户使用本机时间和日期图片进行选择。所以我的想法是为手机用户提供便利对于本机日期/时间选择器和台式机/笔记本电脑用户，请使用任何插件。很高兴我能提供帮助。
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();
});