我正在使用用于 JQueryMobile 的 Datebox,但我找不到任何方法来连接日期更改事件(可能缺少一些明显的东西!)我正在使用内联日历,因此如果这使得没有可用的文本字段区别。
当我在日历中选择日期时,有没有办法触发事件?谢谢,贝基
我正在使用用于 JQueryMobile 的 Datebox,但我找不到任何方法来连接日期更改事件(可能缺少一些明显的东西!)我正在使用内联日历,因此如果这使得没有可用的文本字段区别。
当我在日历中选择日期时,有没有办法触发事件?谢谢,贝基
这个例子是基于一个 DateBox2 制作的,如果你使用的是旧版本,请告诉我。
工作示例:http: //jsfiddle.net/Gajotres/ktbcP/15/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/<jqm-date></jqm-date>box.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
$(document).on('pageinit', '#index', function(){
$('#mydate').bind('datebox', function(e, p) {
if ( p.method === 'set' ) {
e.stopImmediatePropagation()
alert('Changed');
}
});
});
DateBox2 有几个回调函数,set 就是其中之一。您需要做的是将日期框事件绑定到输入框,如下所示:
$('#mydate').bind('datebox', function(e, p) {
if ( p.method === 'set' ) {
e.stopImmediatePropagation()
alert('Changed');
}
});
只需检查适当的方法。他们的官方文档包含完整的方法列表。
不幸的是,检测手动日期更改的事件不存在,如果这是您需要的。