Android上的输入类型日期验证答案

【问题标题】：input type date validation on AndroidAndroid上的输入类型日期验证
【发布时间】：2013-04-30 15:20:15
【问题描述】：

我正在使用 jQuery Mobile 1.3.1 并且想要一个带有日期选择器的表单。我查看了文档并想出了这个：

<input type="date" name="Anreise" id="Anreise" data-mini="true" />

这适用于 iOS，尽管它将日期从本地格式转换为 2013-04-30。

在 Android 上，我发现表单不会提交，因为本机日期选择器输出 2013-4-30。在提交日期选择器弹出，它说你应该选择一个值。但我无法将值更改为2013-04-30。

这是如何正确完成的？ jQuery Mobile 上的 datpicker 是否适用于所有浏览器和设备？

解决方案：

我用过Mobiscroll：

<link rel="stylesheet" href="css/mobiscroll.core.css" />
<link rel="stylesheet" href="css/mobiscroll.ios.css" /> 
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/mobiscroll.core.js"></script>
<script src="js/mobiscroll.core-de.js"></script>
<script src="js/mobiscroll.datetime.js"></script>
<script src="js/mobiscroll.datetime-de.js"></script>
<script src="js/mobiscroll.ios.js"></script>
<script>
    $(function(){
        $("#Anreise").mobiscroll().date({
            lang: 'de',
            dateOrder: 'dd mm yy',
            dateFormat : "dd.mm.yy"
        });
    });
</script>

<input type="text" name="Anreise" id="Anreise" data-mini="true" />

【问题讨论】：

标签： jquery html jquery-mobile mobiscroll datebox

【解决方案1】：

很遗憾，HTML5 规范没有提供定义日期格式的方法，老实说，这对他们来说是一个非常糟糕的决定。

您始终可以为 jQuery Mobile 使用第三方日期选择器。

其中只有 3 个值得一提，每个都可以配置为显示特定的日期格式，并且每个都适用于所有设备。你我会推荐你 Mobiscroll，因为它的皮肤看起来像原生的移动/桌面日期选择器。

Mobiscroll - http://jsfiddle.net/Gajotres/WDjfR/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobiscroll().date({
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
        dateOrder: 'dd mm yy',
        dateFormat : "dd-mm-yy"
    });  
});

Mobipick - http://jsfiddle.net/Gajotres/zyVjE/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

Datebox - http://jsfiddle.net/Gajotres/ktbcP/

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>

如果您想了解有关 jQuery Mobile 日期选择器的更多信息，请查看此 article。

【讨论】：