<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/mobipick.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/external/xdate.js"></script>
<script type="text/javascript" src="js/external/xdate.i18n.js"></script>
<script type="text/javascript" src="js/mobipick.js"></script>
<script>
$(document).on("pagecreate", pageselector, function() {
var picker = $("input[type='text']", this);
picker.mobipick();
picker.on("change", function() {
// formatted date, like yyyy-mm-dd
var date = $(this).val();
// JavaScript Date object
var dateObject = $(this).mobipick("option", "date");
});
});
</script>
</head>
<body>
<input type="text" placeholder="Last Service Date">
<input type="submit" value="Book">
<input type="reset" value="Reset">
</body>
我使用Mobipick作为日期,我在我的js和css文件夹中包含这些文件 项目,但触摸移动日期输入区域时,日历不会显示。
我想在我的表单中添加日期,我已经通过jquery-ui在webstorm的项目中实现了它在浏览器上工作正常但在移动设备上没有工作
答案 0 :(得分:0)
根据您的小提琴来源更改代码如下。在脚本中包含jquery和jquery移动库
<link rel="stylesheet" href="http://mobipick.sustainablepace.net/css/mobipick.css" />
<script src="http://mobipick.sustainablepace.net/external/xdate.js"></script>
<script src="http://mobipick.sustainablepace.net/external/xdate.i18n.js"></script>
<script src="http://mobipick.sustainablepace.net/js/mobipick.js"></script>
<div data-role="page" id="index">
<div data-role="main" class="ui-content">
<form action="#" method="POST" id="myForm">
<label for="CustomerName" class="ui-hidden-accessible">Name:</label>
<input type="text" name="CustomerName" id="CustomerName" value="" placeholder="Name"/>
<label for="PhoneNumber" class="ui-hidden-accessible">Phone Number</label>
<input type="text" name="PhoneNumber" id="PhoneNumber" placeholder="Phone Number"/>
<label for="Address" class="ui-hidden-accessible">Address</label>
<input type="text" name="Address" id="Address" placeholder="Address">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="TDI" id="TDI3" value="TDI30" />
<label for="TDI3">TDI 3.0</label>
<input type="radio" name="TDI" id="TDI4" value="TDI42" />
<label for="TDI4">TDI 4.2</label>
</fieldset>
</div>
<label for="RegistrationNumber" class="ui-hidden-accessible">Registration Number</label>
<input type="text" name="Registration Number" id="RegistrationNumber" placeholder="Registration Number"/>
<input type="text" placeholder="Last Service Date" id="sdate"/>
<input type="submit" value="Book"/>
<input type="reset" value="Reset"/>
</form>
</div>
</div>
,您的javascript代码就像
$(document).on("pagecreate",function(event){
$('#sdate').mobipick({
dateFormat: "MM-dd-yyyy"
});
});
参考此 FIDDLE
这也是FIDDLE DEMO