简洁js日历控件的使用
往Web工程添加纯js日历控件
在网上找到了DatePicker.js（http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html），就试一试是否要用。
第一步：web 工程中新建js文件，名字就叫DatePicker.js
第二步：在html标签中使用，使用方法可参考上面链接的说明。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加员工</title> <link href="/web01/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/web01/js/DatePicker.js"></script> </head> <body> <%@ include file="top.jsp" %> <form action="/web01/empController" method="get"> 员工姓名：<input type="text" name="enameTxt" value="" maxlength="10"><br> 职位：<input type="text" name="jobTxt" value="" maxlength="9"><br> 领导号：<input type="text" name="mgrTxt" value="" maxlength="4"><br> 雇佣日期：<input id="hiredate" type="text" name="hiredateTxt" value="" onfocus="setday(this,'yyyy-MM-dd','2010-01-01','2020-12-30',1)" readonly="readonly"><br> 工资：<input type="text" name="salTxt" value="" maxlength="7"><br> 奖金：<input type="text" name="commTxt" value="" maxlength="7"><br> 部门编号：<input type="text" name="deptnoTxt" value="" maxlength="2"><br> <input type="submit" value="Add"> <input type="hidden" name="callTp" value="empAdd"> <br/> </form> <%@ include file="bottom.jsp" %> </body> </html>
第三步：测试
日期控件的效果出来了。
注意一点是我把DatePicker.js文件中的最后一行代码稍微修改了一下。就是height的值从100%改成170px，原因是使用100%时日期控件下面会被截断。大家也可在自己环境中测试一下。
document.write("<iframe id='calendarIframe' scrolling='no' frameborder='0' width='100%' height='170px'></iframe></div>");
