datetimepicker日期控件

示例文件下载：点击此处

必须支撑文件：

注意：jquery-1.9.1.js与jquery.ui.core.js要放在jquery.ui.datepicker.js前面加载！

<script type="text/javascript" src="${jsBasePath}/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.core.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery-ui-timepicker-zh-CN.js"></script>
<link href="${cssBasePath}/jquery-ui-timepicker-addon.min.css" rel="stylesheet" type="text/css" />
<link href="${cssBasePath}/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- 橘黄清新版 -->
<!-- <link href="${cssBasePath}/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" /> -->
<!-- 灰色素雅版 -->
<link href="${cssBasePath}/jquery.ui.theme.css" rel="stylesheet" type="text/css" />

 

页面示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    response.setHeader("Cache-Control", "no-cache,no-strore");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", -1);
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<c:set var="jsBasePath" value="${contextPath}/js" />
<c:set var="cssBasePath" value="${contextPath}/css" />
<c:set var="imagesBasePath" value="${contextPath}/images" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="${jsBasePath}/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.core.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery-ui-timepicker-zh-CN.js"></script>
<link href="${cssBasePath}/jquery-ui-timepicker-addon.min.css" rel="stylesheet" type="text/css" />
<link href="${cssBasePath}/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- 橘黄清新版 -->
<%-- <link href="${cssBasePath}/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" /> --%>
<!-- 灰色素雅版 -->
<link href="${cssBasePath}/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<title>日期控件测试</title>
 <script>
     $(document).ready(function() {   
         $('#testDate').datetimepicker({});//基础初始化日期控件
     }); 
 </script>
</head>
<body>
<input type="text" name="testDate" id="testDate"  readonly="readonly"/>
</body>
</html>

 

日期时间控件效果图：

 

posted @ 2018-02-12 16:46  稚语希听  阅读(106)  评论(0)    收藏  举报