1

我正在使用 Foundation Reveal 模式首先显示包含突出显示日期的日历的 Reveal，然后显示第二个 Reveal，其中包含有关在所选日期运行的事件的一段信息。在第二次展示中，连同有关事件的信息，我还想显示被选中的日期。

如何将所选日期从日历模式传递到信息模式？

我已经检查了有关 Reveal 的基础文档，但我没有看到这个选项： http: //foundation.zurb.com/docs/reveal.php

我也看过 jQuery.data() http://api.jquery.com/data/

我尝试在我的代码中使用 jQuery.data()，但日期参数没有被传递给信息显示 - 我在运行代码时收到错误“$ 未定义”。

html提取：

<div id="roseBasicInfoModal" class="reveal-modal"> 
  <h2>Rose Tinted Cupcakes - rose making class</h2>
  <p>
    You've seen those show stopping roses on the TV and in baking books and now you'd like to master them yourself!? In this class you will learn how to make a selection of roses suitable to adorn cupcakes and large cakes, both with and without cutters, from the impressive large bloom to the delicate small detail.
  </p>
  <p>
    During the 3 hour course... etc. etc.
  </p>
  <script>
    document.write("Date: " + $('roseBasicInfoModal').data('selectedDate')); //not working - doesn't display anything - error '$ is undefined' ??
  </script>

  <a class="round button" href="#" data-reveal-id="roseFullDetailsModal" data-animation="fadeAndPop" data-size="xlarge">Full Details</a>
  <a data-reveal-id="calendarModal" class="round button" href="#">Back</a>
  <a class="close-reveal-modal">×&lt;/a>
</div>

和 javascript：

<script>

$(function() {

  var class_dates = {'2012/12/4':'1st class' , '2012/12/20':'2nd class'};

  $("#datepicker").datepicker({
    beforeShowDay: function(date) {  // function to highlight dates of classes
      var search = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + (date.getDate());

      if (class_dates[search]) 
      {
        return [true, 'highlight', class_dates[search] || ''];
      }

      return [false, '', ''];
    },

    onSelect: function(dateText, inst) // function to show basic info when date selected 
    {
      if (dateText == '04-12-2012') //display different class info depending on the date
      {
       $("#roseBasicInfoModal").reveal({ "open": function () {$("#roseBasicInfoModal").data('selectedDate', dateText);  } }); //attempt to make selected date available to roseBasicInfoModal div - not working!!
      } 
      if (dateText == '20-12-2012')
      {
       $("#startfinishBasicInfoModal").reveal({ "open": function () { alert("Date is: " + dateText) } }); //playing with 'open' option
      }
    }

  });
});


$(function() {
  $( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" ); //set date format for parsing and displaying dates
});

// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
  function() {
    $( this ).addClass( "ui-state-hover" );
  },
  function() {
    $( this ).removeClass( "ui-state-hover" );
  }
); 
</script>
4

1 回答 1

0

我设法使用 datepicker 的 altField 选项来做到这一点，如 API 文档中所述：http: //api.jqueryui.com/datepicker/#option-altField

我最初放弃了这个选项，因为我不想显示输入字段。但是，由于我看不到任何其他方法可以将日期从日历获取到信息模式，因此我决定使用此方法并使用 CSS 对其进行样式设置，以便日期看起来不像输入字段，并且还指定只读在 HTML 中，以便用户无法编辑日期。

JavaScript：

$(function() {

$( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" ); //set date format for parsing and displaying dates
$( "#datepicker" ).datepicker( "option", "altField", ".displayDate" ); //pass date to display in modal for class info
$( "#datepicker" ).datepicker( "option", "altFormat", "DD, dd-mm-yy" ); //display date in long format including day of the week

});

HTML：

<p><b>Date: <input type="text" class="displayDate" readonly /></b></p>

CSS：

input.displayDate
{
width: 50%;
display: inline;
border:none;
box-shadow:none;
font-weight:bold;
font-family:inherit;
color: black;
}
于 2013-01-04T12:05:34.557 回答