jQuery手机日历与3状态日的颜色

我正在考虑创建一个活动和预订系统.

我发现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>

jQuery手机日历与3状态日的颜色

解决方法

相关文章