datepicker日期悬停弹出窗口

时间:2012-08-18 14:15:30

标签: popup datepicker hover onmouseover

当我将鼠标悬停在一周上时,我正试图获取一周的日期,其中包含每天弹出的数据。如果我点击一周中的日期,我可以让它弹出一个显示,但我希望它发生在鼠标悬停/鼠标中心。这是我的代码:

    <html>  
    <head>  
      <link href="./jquery-ui.css" rel="stylesheet" type="text/css"/>  
      <script type="text/javascript" src="./jquery.min.js"></script>  
      <script src="./jquery-ui.min.js"></script>  
      <script type="text/javascript" src="./popup.js"></script>

      <script>  

      var dateString;
      var sundayDate;
      var mondayDate;
      var tuesdayDate;
      var wednesdayDate;
      var thursdayDate;
      var fridayDate;
      var saturdayDate;


      $(document).ready(function() {  
        $("#datepicker").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                onSelect: function(dateText, inst) {
                    var date = new $(this).datepicker('getDate');
                    sundayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                    mondayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
                    tuesdayDate   = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                    wednesdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
                    thursdayDate  = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                    fridayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                    saturdayDate  = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                }
        });

        $('td a').live('mouseenter', function () {
            popup('<table border="1" width="350">' +
            '   <tr>' +
            '      <th>Su</th>' +
            '      <th>Mo</th>' +
            '      <th>Tu</th>' +
            '      <th>We</th>' +
            '      <th>Th</th>' +
            '      <th>Fr</th>' +
            '      <th>Sa</th>' +
            '   </tr>' +
            '   <tr height= "50px">' +
            '      <td valign="top" width = "50px">' + sundayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + mondayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + tuesdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + wednesdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + thursdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + fridayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + saturdayDate.getDate() + '</td>' +
            '   </tr>' +
            '</table>');
        });

      });
    </script> 
    </head>  
    <body>  

    <div class="demo">
        <div id="datepicker"></div>
    </div>

    </body>  
    </html>

我读过一些关于使用.on而不是.live的内容,因为这是当前的方法,但是我仍然迷失了如何在“鼠标悬停”上获取选择的日期并且它会使当前日期瘫痪。我可以处理周的表格外观并输入数据,但是我希望选择鼠标结束的日期并触发onSelect操作。

提前感谢任何对此的回复。

1 个答案:

答案 0 :(得分:0)

我认为您可以通过使用包含以下内容的按钮或其他对象来触发此操作:

<label onmouseover="mouseenter">move here</label>