我正在考虑创建一个活动和预订系统.
我发现Stack Overflow问题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>
UPDATE
我认为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","color" : "white"});
$('div.ui-dateBox-griddate[data-date=27][data-theme]').css({"background-color":"blue","color" : "white"});
}
});
</script>