如何在网页上自动加载JQuery datepicker显示日历?需详细说明,将网页代码附上。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在网页上自动加载JQuery datepicker显示日历?需详细说明,将网页代码附上。相关的知识,希望对你有一定的参考价值。

效果类似:

参考技术A 尝试先做一个点击按钮触发日历打开;
然后在jquery中获取这个按钮 $按钮.focus(); 或 $按钮.click();
就触发了。

在页面初始化后,调用 $按钮.focus(); 的意思就是当浏览器打开页面,浏览器自动点一下日历,触发打开事件。这跟自动打开没区别。

$(function()
$按钮.focus();
)

jquery datepicker在页面上刷新数据

【中文标题】jquery datepicker在页面上刷新数据【英文标题】:jquery datepicker refreshing data on page 【发布时间】:2013-07-28 00:59:41 【问题描述】:

这是一个双重问题。更改日期选择器时如何更新页面上的数据(无需重新加载页面)? 另外,如何在我的 sql 语句中将选定的日期传递给 dtpickerdate? 这是我的示例代码

<html>
<head>
<link href="../css/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="../js/jquery-1.9.1.js"></script>
  <script src="../js/jquery-ui.js"></script>
</head>
<body>
<?php include("../navbar.php"); ?>
<p>Date: <input type="text" id="datepicker" value="<?php echo date("m/d/Y"); ?>" /></p>
<script type="text/javascript">
$(function() 
  $("#datepicker").datepicker();
);
</script>
<table>
<?php 

$sqltext = "SELECT * FROM data where startdate=dtpickerdate";

$result = $mysqli->query($sqltext);
while($row = $result->fetch_assoc()) 
  echo "<tr><td>".$key."</td>";
  echo "<td>".$row['sun']."</td><td>".$row['mon']."</td><td>".$row['tues']."</td><td>".$row['wed']."</td><td>".
          $row['thurs']."</td><td>".$row['fri']."</td><td>&nbsp".$row['sat']."</td>";


?>
</table>
</body>
</html>

【问题讨论】:

【参考方案1】:

您需要 AJAX,首先使用您的查询函数创建一个新的 php 文件,该文件将接收带有 datepicker 值的 $_POST 参数:

getData.php

<?php 
    $dtpickerdate = isset($_POST['dtpickerdate']) ? $_POST['dtpickerdate'] : NULL
    $sqltext = "SELECT * FROM data where startdate = $dtpickerdate";

    $result = $mysqli->query($sqltext);
    while($row = $result->fetch_assoc()) 
      echo "<tr><td>".$key."</td>";
      echo "<td>".$row['sun']."</td><td>".$row['mon']."</td><td>".$row['tues']."</td> <td>".$row['wed']."</td><td>".$row['thurs']."</td><td>".$row['fri']."</td><td>&nbsp".$row['sat']."</td>";
    
?>

现在你在你的输入上监听 change 事件并使用 AJAX 调用你的 PHP,当调用完成时你更新你的表:

$('#datepicker').change(function()
    $.post('getData.php',dtpickerdate : $(this).val(), function(response)
        $('table').html(response);
    );
);

【讨论】:

以上是关于如何在网页上自动加载JQuery datepicker显示日历?需详细说明,将网页代码附上。的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI datepicker 在对话框中自动打开

如何在 JQuery UI Datepicker 中使用不同的日期格式(用于在 html 上显示和存储在数据库中)?

当从 ajax 加载 html 时,让 jQuery datepicker 生效

如何设置jquery的datepicker,让它进入页面就自动显示在页面的某个位置,而不是点击了才显示

使用 jQuery Datepicker 使日期在加载时无法选择

覆盖在第一页加载时奇怪可见的 jQuery UI Datepicker div。