Question

I’m using Foundation Reveal modals to display first a Reveal containing a calendar with highlighted dates, then a 2nd Reveal containing a paragraph of information about an event running on the selected date. In the 2nd reveal, together with the information about the event, I also want to show the date that was selected.

How can I pass the selected date from the calendar modal to the information modal?

I’ve checked the foundation documentation about Reveal but I don’t see this option:
http://foundation.zurb.com/docs/reveal.php

I’ve also looked at jQuery.data()
http://api.jquery.com/data/

I tried using jQuery.data() in my code, but the date parameter is not being passed to the information reveal – I get an error “$ is undefined” when I run the code.

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>

and 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

I managed to do this using the altField option for datepicker, as described in the API documentation here: http://api.jqueryui.com/datepicker/#option-altField

I had initially discarded this option as I didn’t want to display an input field. However since I couldn’t see any other way to get the date from the calendar to the information modal, I decided to use this method and style it with CSS so that the date doesn’t look like an input field, and also specify readonly in the HTML so that the date is not editable by the user.

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;
}