jquery datepicker 使用心得

最新推荐文章于 2025-10-16 13:15:51 发布

原创最新推荐文章于 2025-10-16 13:15:51 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #stylesheet #javascript #string #path #html

Web前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在 JSP 页面中使用 jQuery Datepicker 插件实现日期选择功能，并解决了常见问题如 $ 未定义等。文章还提供了使用步骤及代码示例。

jquery datepicker是一个很好用的插件，简单。

这里采用的是jsp页面(实现与html一样)

<!--头文件-->

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>




<html>
  <head>
    <base href="<%=basePath%>">   

 <!--第一步：引入文件 --> 

<link rel="stylesheet" type="text/css" href="jquery.datepick.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.datepick.js" type="text/javascript"></script>
<script src="jquery.datepick-zh-CN.js" type="text/javascript"></script>




<!-- 第二步：写javascript -->   

  <script type="text/javascript">
     $(document).ready(function() {
                   $('#dateinput').datepick( {
                   dateFormat : 'yy-mm-dd'
                   });
               });
    </script>     


     
  </head>  
  <body>    
       记录时间：<input id="dateinput" type="text" readonly="readonly"/>
  </body>   
</html>

第三步：测试结果：

遇到的问题：$ is not defined
解决方案：在引入文件，如果采用的是相对路径，获取不到引入的文件。所以引入文件要采用绝对路径。
1)、查看是否引入jquery文件
2)、查询路径是否错误,可以在页面源码中点击js文件路径.
3)、JS是解释型语言，是根据标签引用分块顺序执行的，$是jQuery中的产生的对象，需要用的话，必须将jquery.js文件放在使用它的JS前面。

jquery datepicker 详解使用语法