具有 3 种状态日颜色的 jQuery 移动日历答案

【问题标题】：jQuery mobile calendar with 3-state day colours具有 3 种状态日颜色的 jQuery 移动日历
【发布时间】：2011-06-15 13:37:32
【问题描述】：

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

我发现了堆栈溢出问题jQuery - Mobile date picker control，其中显示了jquery-mobile-datebox 和jQuery-Mobile-Themed-DatePicker。

我想显示一个日历，其中我从服务器获得的某些日期是

可用
不可用
保留

当触摸保留或可用日期时，我想显示时间 - 每天可以有多个时间。然后，用户可以单击一个时间来保留它，这将触发 Ajax 请求。

例如，jQuery UI datepicker 有

 onSelect: function(date, inst) {

从我在上面的选择器中可以看到，我需要的东西并不容易获得。在我开始自己破解它们之前：

哪一个最适合我想要的？
是否有更好的已经满足我的需求？

更新：

萤火虫给了我

<div class="ui-datebox-griddate ui-corner-all ui-btn-up-e" data-date="25" data-theme="e">25</div>

其中 ui-btn-up-e 可以从 a - 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(...)
  }
);

更新：注意：当我单击时，日历会更改日期，完全重新加载日历。也许我需要停止那个:(

【问题讨论】：

fwiw，DateBox 今天和昨天都有一些更新，其中最主要的是它现在允许 highDates，一组要突出显示的日期（eq 你是“保留”），它已经有 blackDates（eq “无法使用”）。它确实有一些回调支持，但你必须做一些工作才能获得时间列表功能。
谢谢@JTS - 我去看看
感谢您提出这个问题。我也有同样的问题

标签： calendar datepicker jquery-mobile

【解决方案1】：

每次切换三个类并保存状态的最佳方式是什么？

类似：

$('.ui-datebox-griddate').click(function (e) {
  var $this = $(this);
  var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];

  if (typeof $this.data("ui-btn-cycle") == "undefined" ) {
    this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
    $this.data("ui-btn-cycle", cycle[0]);
  }

  for (var i=0; i<cycle.length; i++) {
    if ( $this.hasClass(cycle[i]) ) {
      $this.removeClass(cycle[i]).addClass(cycle[i % cycle.length]);
      $this.data("ui-btn-cycle", [i % cycle.length]);
      break;
    }
  }
  $.get( ... );

  e.preventDefault() // stop default click behaviour
});

这可以循环任意数量的类。当前状态可通过在相应元素上调用 .data("ui-btn-cycle") 获得。

这样更好：

$('.ui-datebox-griddate')
.each(function () {
  var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];
  $(this).data("ui-btn-cycle", cycle);
  this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
})
.click(function (e) {
  var cycle = $(this).data("ui-btn-cycle");
  $(this).removeClass(cycle[0]).addClass(cycle[1]);
  cycle.push(cycle.shift());
  e.preventDefault();
});

当前状态在相应元素上始终为.data("ui-btn-cycle")[0]。在这里看到它的工作：http://jsfiddle.net/Tomalak/mAH4n/

【讨论】：

太棒了！ - 我没有时间检查它，但它看起来是可行的。为什么不顺便切换（功能，功能，功能）？你的解决方案会更短，因为我需要为每个切换做 ajax 但只是想知道
@mplungjan 因为toggle() does not work this way.
@Tomalak 是的，other toggle() 确实可以这样工作:)
@mplungjan 哦，很好。 :) 甚至不知道那个。可能是一个有用的替代方案，只需为 Ajax 调用创建一个单独的函数就可以了。
这是我在更新中发布的——我猜你只是认为我创造了一种幻想方法；）

【解决方案2】：

根据 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>

【讨论】：

感谢查看，切换颜色从哪里来？
啊哈。 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 可以从 a - e 更改。现在我需要确定数据主题是否也需要更改
是的，有 jQuery Mobile 主题。 jquerymobile.com/test/docs/api/themes.html您可以指定要用于突出显示的主题（pickPageOHighButtonTheme），但我认为该主题随后用于所有突出显示。
谢谢 - 请查看我的更新。我认为我不需要关心主题，但是我之前没有尝试在多个类中更改类名...
fwiw，该数据主题用于悬停功能。它为上下班拉动。