jQuery移动日历与3状态日颜色 [英] jQuery mobile calendar with 3-state day colours
问题描述
我在寻找创建活动和预订系统。
I am looking at creating an event and reservation system.
我发现了Stack Overflow问题 jQuery - 移动日期选择器控件，其中显示 jquery-mobile-datebox < a>和 jQuery-Mobile-Themed-DatePicker 。
I found the Stack Overflow question jQuery - Mobile date picker control which shows jquery-mobile-datebox and jQuery-Mobile-Themed-DatePicker.
我想显示一个日历，其中从服务器获得的某些日期是
I want to display a calendar where certain dates I get from the server are
- 可用
- 不可用
- 保留
$ b <日期被触摸，我想显示时间 - 每天可以有多个时间。
When a reserved or available date is touched, I want to show times - there can be more than one time per day. The user can then click on a time to reserve it which would hit off an Ajax request.
例如，jQuery UI datepicker具有
jQuery UI datepicker, for example, has
onSelect: function(date, inst) {
$ b b
从我在上面的选择者可以看到，我需要的是不容易获得。在我开始黑客入侵他们自己：
From what I can see in the above pickers, what I need is not readily available. Before I start hacking them myself:
- 哪一个会最适合我想要的？
更新：
UPDATE:
Firebug给了我
Firebug gave me
< div class =ui-datebox-griddate ui-corner-all ui-btn-up-edata-date =25data-theme =e> 25< / div>
其中ui-btn-up-e可以从a-e改变。
where ui-btn-up-e can be changed from a - e.
现在我需要知道是否需要更改data-theme。
Now I need to find out if data-theme also needs to be changed
$('.ui-datebox-griddate').click(function () {
alert($(this).attr("class"));
}
每次切换三个类别并保存状态的最好方法是什么？
What is the nicest way to toggle through three of the classes and save the state each time?
$('.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(...)
}
);
更新：注意：更改日期，完全重新加载日历。也许我需要停止：（
UPDATE: NOTE: When I click, the calendar change the date, reloading the calendar completely. Perhaps I need to stop that :(
推荐答案
根据JTSage说，我会有一个玩jQuery移动日历。我想我有一些可能扩展到满足你的要求。我不确定在多大程度上多色主题是可能的（没有广泛的修改）。
Based on what J.T.Sage said I thought I would have a play with jQuery Mobile Calendar. I think I have something which could potentially be extended to fulfil your requirements. I am not sure to what extent multi-colour themeing would be possible (without extensive modifications).
<!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日期对象 - 所以应该可以获取当前月份，并迭代所有匹配数据，更新当前月份的匹配天数（如果适用）例如将下面的 setColours 方法替换为数据/状态感知的东西）。
I suppose the highDates mechanism could be bypassed completely and the individual days uniquely targeted. The plugin maintains a JavaScript Date object of the last date selected (or today if nothing has been selected) - so it should be possible to get the current month and iterate through all your matching data updating the matching days in the current month as appropriate (e.g. replacing the setColours method below with something that is data/state aware).
<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>
这篇关于jQuery移动日历与3状态日颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
