我正在寻找一个事件和预订系统。
我发现了堆栈溢出问题jQuery - Mobile date picker control，其中显示了jquery-mobile-datebox和jQuery-Mobile-Themed-DatePicker。
我想显示一个日历，其中我从服务器获得的某些日期是
触摸保留日期或可用日期时，我想显示时间-每天可能有多个时间。然后，用户可以单击一个时间来保留它，这将触发Ajax请求。
例如，jQuery UI datepicker具有
onSelect: function(date, inst) {
从上面的选择器中可以看到，我所需要的并不容易获得。在我开始自己入侵它们之前，请执行以下操作:
更新:
Firebug 给了我
<div class="ui-datebox-griddate ui-corner-all ui-btn-up-e" data-date="25" data-theme="e">25</div>ui-btn-up-e可以从-e更改。
现在，我需要确定是否还需要更改数据主题
$('.ui-datebox-griddate').click(function () {
alert($(this).attr("class"));
}
每次切换三个类并保存状态的最佳方法是什么？
$('.ui-datebox-griddate').toggle(
function () {
$(this).????? // change ui-btn-up-? to ui-btn-up-a
$.get(...)
},
function () {
$(this).????? // change ui-btn-up-a to ui-btn-up-b
$.get(...)
},
function () {
$(this).????? // change ui-btn-up-b to ui-btn-up-c
$.get(...)
}
);
更新:注意:当我单击时，日历会更改日期，从而完全重新加载日历。也许我需要停止这一点:(
最佳答案
基于J.T. Sage所说的话，我想我会玩jQuery Mobile Calendar。我认为我可以扩展某些内容以满足您的要求。我不确定在多大程度上可以进行多色主题设置(无需进行大量修改)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQueryMobile - DateBox Demos</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){ $.mobile.page.prototype.options.degradeInputs.date = 'text'; });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript">
$('#page').live('pagecreate', function(event) {
$('#mydate').bind('change', function () {
alert($(this).val());
});
});
</script>
</head>
<body>
<div id="page" data-role="page">
<div data-role="content">
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calHighToday": false, "calHighPicked": false, "useInline": true, "useInlineHideInput": true, "highDates": ["2011-06-25", "2011-06-27", "2011-07-04"]}'></input>
</div>
</div>
</html>
更新
我想可以完全绕过highDates机制，并且将唯一的日子定为目标。该插件维护着最后一次选择日期(或者今天，如果未选择任何日期)的JavaScript Date对象-因此，应该可以获取当月并遍历所有匹配数据，以更新当月的当日匹配日期(例如，将下面的setColours方法替换为具有数据/状态感知的内容)。
<script type="text/javascript">
$('#page').live('pagecreate', function(event) {
$('#mydate').bind('change', function () {
//alert($(this).val());
alert($('#mydate').data('datebox').theDate);
});
setColours();
$('#mydate').bind('datebox', function (e, pressed) {
setColours();
});
$('.ui-datebox-gridplus, .ui-datebox-gridminus').bind('vclick', function(){
// To handle changing months
setColours();
//alert($('#mydate').data('datebox').theDate);
});
function setColours(){
$('div.ui-datebox-griddate[data-date=25][data-theme]').css({"background-color":"red", "background-image":"none", "color" : "white"});
$('div.ui-datebox-griddate[data-date=26][data-theme]').css({"background-color":"green", "background-image":"none", "color" : "white"});
$('div.ui-datebox-griddate[data-date=27][data-theme]').css({"background-color":"blue", "background-image":"none", "color" : "white"});
}
});
</script>
关于calendar - 具有三态日颜色的jQuery移动日历，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6358560/