Question

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

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

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

我也看过jQuery.data（） http://api.jquery.com/data/

我尝试在我的代码中使用jQuery.data（），但是日期参数没有被传递给信息显示 - 当我运行代码时，我收到错误“$ is undefined”。

html extract：

<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">Ã—</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>

Answer 1

我设法使用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;
}

如何将参数从datepicker Reveal模式传递给信息Reveal模态

1 个答案: