表单日期控件实践
2018-09-01 本文已影响57人
测试老杨
日期控件HTML代码如下：
<tr>
<td valign="middle" align="right">入职时间:</td>
<td valign="middle" align="left">
<input name="hiredate" id="datetimepicker" title="datetimepicker" style="width: 100%;" />
</td>
</tr>
日期控件JS代码如下：
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true
});
});
</script>
进入新增员工的表单页面
image.png
点击日期控件里面的日历图标
image.png
点击日期控件里面的Clock图标
image.png
JSP页面完整代码如下：
<%@ page pageEncoding="UTF-8"
contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String uname = (String)session.getAttribute("uname");
if(uname==null){
//session中没有登录信息,必须回到登录页面
response.sendRedirect("login.jsp");
return;
}
%>
<html>
<head>
<title>AddEmp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<link href="css/myexamples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.rtl.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">
<link href="css/kendo.default.mobile.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/console.js"></script>
<script type="text/javascript" src="js/mycheck.js"></script>
<script>
$(document).ready(function() {
$("#addemp").click(function(){
$("#addform").submit();
});
});
</script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="top">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:5%;">
<tr>
<td></td>
<td style="color:white;text-align:right;padding-right:30px;font-size:20px;">
用户：<span style="cursor:pointer" id="usr_home"><%=uname%></span> <a class="logout" href="logout.do">[注销]</a>
</td>
</tr>
</table>
</div>
<div id="mainContent">
<h1 style="color:#ff6b18;">新增员工</h1>
<form action="add.do" method="post" id="addform" onsubmit="return check();">
<table cellpadding="0" cellspacing="0" border="0" class="form_table" width="60%">
<tr>
<td valign="middle" align="right">姓名:</td>
<td valign="middle" align="left">
<input type="text" class="k-textbox" name="name" id="name" style="width:100%" />
</td>
</tr>
<tr>
<td valign="middle" align="right">薪水:</td>
<td valign="middle" align="left">
<input type="text" class="k-textbox" name="salary" id="salary" style="width:100%" />
</td>
</tr>
<tr>
<td valign="middle" align="right">年龄:</td>
<td valign="middle" align="left">
<input type="text" class="k-textbox" name="age" id="age" style="width:100%" />
</td>
</tr>
<tr>
<td valign="middle" align="right">部门:</td>
<td valign="middle" align="left">
<select id="dept" name="dept" class="k-dropdown-wrap k-state-default k-state-hover" style="width:100%">
<option value="">请选择</option>
<c:forEach items="${depts}" var="d">
<option value="${d.id }">${d.dName}</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td valign="middle" align="right">入职时间:</td>
<td valign="middle" align="left">
<input name="hiredate" id="datetimepicker" title="datetimepicker" style="width: 100%;" />
</td>
</tr>
<tr>
<td valign="middle" align="right">邮箱地址:</td>
<td valign="middle" align="left">
<input type="text" class="k-textbox" name="email" id="email" style="width:100%"/>
</td>
</tr>
</table>
<div>
<button class="k-button k-primary" id="addemp"> 保存 </button>
</div>
</form>
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true
});
});
</script>
</div>
<div id="footer_bg" style="margin-top:10px;vertical-align:bottom;color:white; height:5%;font-size:16px">
myTech © 2011-2018
</div>
</div>
</div>
</body>
</html>
