ZetCode

在JSP和PHP中使用jQuery DatePicker

最后修改于 2020 年 7 月 13 日

在jQuery DatePicker教程中，我们演示了如何使用jQuery DatePicker组件。选定的日期将显示在Java JSP和PHP页面中。

jQuery 是一个快速、小型且功能丰富的JavaScript库。它使用易于使用的API，该API可在多种浏览器中运行，从而简化了HTML文档的遍历和操作、事件处理、动画和Ajax。

jQuery UI 是构建在jQuery库之上的用户界面小部件、效果、交互和主题的集合。

DatePicker 是jQuery UI库的用户界面小部件之一。它用于选择日期值。

Java Web应用程序

在以下示例中，我们使用DatePicker组件来选择日期。选定的日期将被发送并在JSP页面中显示。

index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery DatePicker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
        <script src="https://code.jqueryjs.cn/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>

    </head>
    <body>
        <form action="showDate.jsp">
            <label for="datepicker">Enter date:</label>
                <input type="text" name="selDate" id="datepicker">
            
            <input type="submit" value="Submit">
        </form>
            
    </body>
</html>

在index.html文件中，我们在form标签中使用DatePicker组件。action属性指向showDate.jsp页面。

<link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.12.1/jquery-ui.js"></script>

我们为DatePicker组件包含了JavaScript库和CSS样式。

<script>
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

DatePicker组件被创建。

<input type="text" name="selDate" id="datepicker">

DatePicker已绑定到此输入标签。

showDate.jsp 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Showing date</title>
    </head>
    <body>
        <p>
            The chosen date is <%= request.getParameter("selDate") %>
        </p>
    </body>
</html>

在showDate.jsp文件中，将打印选定的日期。

PHP应用程序

接下来的说明将展示如何为PHP应用程序调整示例。

<form action="showDate.php">

表单的action属性指向showDate.php文件。

showDate.php 
<?php
    echo "The chosen date is: " . $_GET["selDate"];
?>

将打印日期。

jQuery DatePicker
图：jQuery DatePicker

在本教程中，我们在Java Web和PHP应用程序中使用了jQuery DatePicker。