Jquery UI 的移动版日期拾取器插件 Jquery UI's Datepicker Styled for mobile

下面这个示例是Jquery UI 为移动设备开发的日期拾取器插件,这个插件并不包含在Jquery Mobile默认库当中,你需要自己手动include这些文件

日期拾取器 Datepicker

使用说明 Usage Instructions

日期拾取器自动从type="date"属性的输入框中生成

<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />

我们推荐将label和input包裹在data-role=fieldcontain的div中作为描述,而且这些元素应该添加form中以便在 C级浏览器也能够正常访问

注意:该插件并不包含在Jquery Mobile默认库当中,你需要包含以下文件来使用该插件:

<link rel="stylesheet" href="Jquery.ui.datepicker.mobile.css" /> 
<script src="Jquery.ui.datepicker.js"></script>
<script src="Jquery.ui.datepicker.mobile.js"></script>

你同样可能需要配置页面插件来使"date" input 转换为"text" input 以避免原生"date" input与我们自定义的datepicker所冲突,要实现这样的功能需要在"mobileinit"事件处理函数中使用如下代码:

<script>
   //reset type=date inputs to text
   $( document ).bind( "mobileinit", function(){
   $.mobile.page.prototype.options.degradeInputs.date = true;
   }); 
</script>

把这些代码放置在在Jquery加载后,Jquery Mobile加载前。你可以查看该页面的源代码是如何写的