如何從datepicker傳遞參數顯示模式到信息顯示模式

我使用Foundation Reveal模式首先顯示包含帶突出顯示的日期的日曆的Reveal，然後顯示包含關於運行在選定的日期。在第二個展示中，連同有關該事件的信息，我也想顯示選定的日期。如何從datepicker傳遞參數顯示模式到信息顯示模式

如何將日曆模態中的選定日期傳遞給信息模態？

我檢查的基礎文檔中關於顯示，但我沒有看到這個選項： http://foundation.zurb.com/docs/reveal.php

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

我使用jQuery嘗試。 data（）在我的代碼中，但日期參數不被傳遞給信息揭示 - 我運行代碼時出現「$ is undefined」錯誤。

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

來源

2012-12-18 cpr

我成功地做到這一點使用的日期選擇器的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-04 12:05:34 cpr

如何從datepicker傳遞參數顯示模式到信息顯示模式

回答

相關問題