简洁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><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>添加员工</title><linkhref="/web01/CSS/main.css"rel="stylesheet"type="text/css"/><scripttype="text/Javascript"src="/web01/js/DatePicker.js"></script></head><body><%@ include file="top.jsp"%><formaction="/web01/empController"method="get">员工姓名：<inputtype="text"name="enameTxt"value=""maxlength="10"><

br>职位：<inputtype="text"name="jobTxt"value=""maxlength="9"><

br>领导号：<inputtype="text"name="mgrTxt"value=""maxlength="4"><

br>雇佣日期：<inputid="hiredate"type="text"name="hiredateTxt"value=""onfocus="setday(this,'yyyy-MM-dd','2010-01-01','2020-12-30',1)"readonly="readonly"><

br>工资：<inputtype="text"name="salTxt"value=""maxlength="7"><

br>奖金：<inputtype="text"name="commTxt"value=""maxlength="7"><

br>部门编号：<inputtype="text"name="deptnoTxt"value=""maxlength="2"><

br><inputtype="submit"value="Add"><inputtype="hidden"name="callTp"value="empAdd"><

br/></form><%@ include file="bottom.jsp"%></body></html>

第三步：测试

日期控件的效果出来了。

注意一点是我把DatePicker.js文件中的最后一行代码稍微修改了一下。就是height的值从100%改成170px，原因是使用100%时日期控件下面会被截断。大家也可在自己环境中测试一下。

document.write("<iframeid='calendarIframe'scrolling='no'frameborder='0'width='100%'height='170px'></iframe></div>");