Question

我一直在寻找一段时间，似乎找不到任何我喜欢的东西。我希望它是当你将鼠标悬停在一个名为月份的文本框上时，我的PHP日历会出现。然后在该日历上提供操作。我只是一个初学者和学生，没有足够的知识来使用javascript和jQuery编程系统所以我建议你使用PHP语言:) `

//to read the date today
$currentMonth = date ("m");



//timezone
date_default_timezone_set('Asia/Tokyo');


//Today
$today = date ('Y-m-d',time());

// For H3 Title
$html_title = date('m / Y', $timestamp);


//create prev & next month link  (hour,min,sec,mon,day,day,year


$prev = date('Y-m', mktime(0, 0, 0, date('m', $timestamp)-1, 1, date('Y', $timestamp)));
$next = date('Y-m', mktime(0, 0, 0, date('m', $timestamp)+1, 1, date('Y', $timestamp)));    




//Number Of days in the month
$day_count = date('t' , $timestamp);


//0:Sun 1:Mon 2:tue
$str = date('w' , mktime(0, 0, 0, date('m', $timestamp), 1,date('Y',$timestamp)));


//create calendar
$weeks = array();
$week = '';


//add empty cellpadding
$week .= str_repeat('<td></td>', $str);
for ( $day = 1; $day <=$day_count; $day++, $str++) {

$date = $ym.'-'.$day;

if ($today == $date) {
    $week .= '<td class="today">'.$day;
    }
    else{
        $week .= '<td>'. $day;
        }
    $week .= '</td>';

    //end of the week or of the moth
    if ($str % 7 == 6 || $day == $day_count) {

        if($day == $day_count) {
        //add empty cell
        $week .= str_repeat ('<td></td>' , 6 - ($str % 7));
        }

        $weeks[] = '<tr>'.$week.'</tr>';

        //prepare for new week
        $week = '';

}

}





?>
<!DOCTYPE.html>
<html.lang"ja">
<head>
</head>
<body>

<div class="container">
<div id="c2">
<h3><div class="title"><a href="?ym=<?php echo $prev; ?>">&lt;</a><?php echo $html_title; ?><a href="?ym=<?php echo $next; ?>">&gt;  </a></div></h3>
<br>
<table class="table table-bordered" id = "calendar" >
    <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tues</th>
    <th>Wed</th>
    <th>Thur</th>
    <th>Fri</th>
    <th>Sat</th>
    </tr>
    <center>
    <?php
    foreach ($weeks as $week) {
            echo $week;
        }
        ?>  
    </center>

</table>
</div>

<div id="booking">
        <center>
        <h1>This is your month</h1>
        <input  id="result" type="text" name="month" value="<?php echo $month ?>" readonly>
        <br>
        <h1>Check In </h1>
        <Input type="number" min="<?php echo $day_today; ?>" max="<?php echo $day_count; ?>" value = "<?php echo $day_today; ?>">
        <br>
        <h1>Adults</h1>
        <input type="number" name="adult" min="1" max="10">
        <br>
        <h1>Kids</h1>
        <input type="number" name="kid" min="1" max="10">
        <br>
        </center>
</div>
</div>
</body>
</html>

`

Answer 1

所以在这个 example JS中使用关键字focus来触发，如：

`$("#result").focus(function() {
  $(".calendar").addClass("someCss")
});`

并在用户点击字段或离开时添加和删除CSS类。您可以使用JS中的$("#result").on("mouseenter", function() mouseenter和CSS中的hover执行相同的操作。要使日历消失，您将使用mouseleave。

当你真的想用悬停做的时候我会建议使用bootstraps popover功能。并在popover中显示您的日历。希望有所帮助

Answer 2

你不能在php上做。但你可以使用javascript。在你的文本框月份上添加一个onhover属性并对该事件做一些事情

将鼠标悬停在文本框中时显示日历

2 个答案: