1.下载jQuery日期插件,见附件。
2.导入相应的js文件和jquery源码。例如
<link rel="stylesheet" type="text/css" href="css/datePicker.css">
<script type="text/javascript" src="js/jquery-1.2.5.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/jquery.datePicker.js"></script>
3.制作1个from表单。
<form name="chooseDateForm" id="chooseDateForm" action="servlet/DateServlet" method="post">
<fieldset>
开始时间:<input name="startDate" id="startDate" class="date-pick" /><br>
结束时间:<input name="endDate" id="endDate" class="date-pick" /><br>
<label for="test-select">Test select:</label>
<select name="test-select" id="test-select" style="width: 170px">
<option value="1">Test SELECT </option>
<option value="2">Doesn't shine through</option>
<option value="3">Even in IE</option>
<option value="4">Yay!</option>
</select>
<input type="submit" value="提交" />
</fieldset>
</form>
4.当页面加载完成后执行输入框的替换。例如:
<script type="text/javascript">
$(function(){
$('.date-pick').datePicker({startDate:'01/01/1996'});
});
</script>
$('.date-pick')表示选择所有class属性为date-pick的元素,也就是引用的css,在这里是
结束时间:<input name="endDate" id="endDate" class="date-pick" /><br>
5.为了验证除日期输入框之外其他表单子元素是否能接受,特别加了以一个下拉列表。现在就可以在服务器端验证是否能收 到数据。例如在servlet中的doPost方法中可以这样写:
String startDate = request.getParameter("startDate");
String endDate = request.getParameter("endDate");
String selectValue = request.getParameter("test-select");
String[] dateArray = new String[3];
dateArray = startDate.split("/");
Calendar ca = null;
try{
int day = Integer.parseInt(dateArray[0]);
int month = Integer.parseInt(dateArray[1]);
int year = Integer.parseInt(dateArray[2]);
ca = new GregorianCalendar(year,month,day);
}
catch (NumberFormatException e) {
System.out.println("日期转换错误");
e.printStackTrace();
}
System.out.println(("YEAR: " + ca.get(Calendar.YEAR)));
System.out.println(("MONTH: " + ca.get(Calendar.MONTH)));
System.out.println(("DAY: " + ca.get(Calendar.DAY_OF_MONTH)));