Question

我创建了一个自定义日历，基本上只是为每月的每一天创建一个表格单元格。

我要做的是当用户点击特定日期时，显示一个弹出窗口（将加载一个单独的页面），显示所选日期的所有事件。

但是我不确定如何设置所选日期的值，以便我可以将其传递到弹出页面。

这就是我现在所拥有的：

<td align="center" valign="middle" width="26" height="27s" 
     class="lightBlue dayPopup" style="cursor: pointer;" 
     onMouseOver="javascript:this.className='lightBlueH';
                  document.getElementById('#Request.calID#day#Day(Variables.cellDate)#').style.visibility='visible';"
     onMouseOut="javascript:this.className='lightBlue';
                 document.getElementById('#Request.calID#day#Day(Variables.cellDate)#').style.visibility='hidden';"
     onClick="setDate(#Variables.cellDate#);" id="#Variables.cellDate#">

JQuery代码：

$("##setDate").click(function(date) {
        var viewDate = date;
    });

然后我设置了一个将URL传递给控制弹出窗口的函数的变量。

有人可以指出我正确的方向，我试图设置所选日期的值吗？

Answer 1

你需要利用“this”的强大功能，在下面的代码中，它将引用被点击的单元格。

$("td.yourCalendarCells").click(function() {
            var viewDate =     getDateFromCell(this);   
    }); 


function getDateFromCell(cell){
     return $(cell).attr('id')
}

我不确定你的Id属性是什么格式或者你如何存储viewDate，所以你可能需要在getDatefromCell中做更多的事情来返回一个日期，但是你应该有足够的时间来解决这个问题。

Answer 2

您主要想将日期发送到弹出页面以显示该日期的事件。它很容易您可以采用http://jsfiddle.net/DQ3Bm/

中使用的方法

即

使用标记来保持附加到元素的检测/时间，但仍然只向用户显示日期部分。

<table class="event-calendar">
    <tr>
        <td>
            <time datetime="2013-01-01">1</time>
        </td>
        <td>
            <time datetime="2013-01-02">2</time>
        </td>
    </tr>
</table>

然后在td点击，您可以获取传递给弹出网址的日期

$(document).ready(function(){
    $(".event-calendar td").click(function(){
        alert($(this).find("time").attr("datetime"));

    });
});

设置值onClick表格单元格

2 个答案: