输入类型日期仅适用于移动设备答案

【问题标题】：input type date only for mobile输入类型日期仅适用于移动设备
【发布时间】：2017-12-06 08:34:45
【问题描述】：

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

下面是我的代码

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

html

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

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

【问题讨论】：

标签： javascript jquery input datepicker

【解决方案1】：

您可以使用Modernizr 的自定义构建：

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

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

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

【讨论】：

谢谢.. 实际上，我有意在移动设备中触发本地日期和时间选择器。因为移动用户习惯于使用本地时间和日期图片进行选择。所以我的想法是为移动用户提供本地日期/时间选择器和桌面/笔记本电脑用户使用任何插件的便利
很高兴我能帮上忙。

【解决方案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();
});

【讨论】：

谢谢...很酷，这几乎是工作。它并不是真的不测量 TinyDatePicker 或任何其他选择器。如果您想在任何地方尝试直播，您可以使用任何其他选择器。我有另一个想法，比如对于桌面，我们可以将输入类型日期更改为文本，将移动视图类型更改为日期.. 你觉得呢？
尚未测试，但我更新了我的代码（在此处快速阅读文档github.com/chrisdavies/tiny-date-picker/blob/master/docs/… 后），试试这样的。
酷.. 超级酷。 ..几乎可以工作..有一件事还没有工作..当它加载到移动插件中时仍然触发但如果屏幕尺寸从桌面到移动尺寸然后工作正常。我将在真正的手机上进行测试.. 我认为我们需要做一些事情，比如在手机视图中加载时，插件也不会被触发。当前默认触发
检查客户端是否是移动设备，“if (typeof window.orientation !== 'undefined'){ ... }”在我看来比 size 好。
谢谢我正在尝试.. 男子气概它首先需要修复 onload 移动将是插件不被触发和桌面将被触发。

【解决方案3】：

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

这里有实时代码codepen.io/pagol/pen/MOzVMP

【讨论】：