最近做了一些前端的时间控件的应用，下边总结一下用的这些控件。
一 Bootstrap的datetimepicker
1. 首先导入必须的css和js文件
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="datepicker.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="bootstrap-dateTimePicker.js"></script>
2. 在jsp页面加上<input>标签
<div class="condition" id="time1">
<lable><span class="lbl">开始日期：<span></lable>
<div class="input-group date" id="datetimepicker">
<input type="text" class='form-control' id='monthList' style="width:70%;"/>
<span class="input-group-addon" style="margin-left:0px;width:30px;height:34px;">
<span class="glyphicon glyphicon-calendar"></span>//是为了加日历图标
</span>
</div>
</div>
在页面初始化的时候也初始化这个插件
$(function(){
$('#datetimepicker').datetimepicker(
{
format:'YYYY-MM-DD',//日期格式，可以根据需要随时改变
defaultDate:'', //可以初始化日期
}
);
});
这里只是写了一部分样式，具体大家可以参考网上资料寻求自己需要的样式。
样
式图片显示
一 My97DatePicker-WdatePicker
1下载My97DatePicker文件夹，My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
My97DatePicker.htm是必须文件,不可删除
2.在jsp页面导入<script type="text/javascript" src="../common/My97DatePicker/4.8/WdatePicker.js"></script>
这个js文件会自动关联My97DatePicker文件夹下的其他样式，所以导入这一个就可以了。
3.在jsp页面书写<input>标签
<div>
开始时间：
<input type="text" class="Wdate" name="startDate" id="startDate"
οnclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}'})" />
结束时间：
<input type="text" name="endDate" id="endDate"
οnclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'startDate\')}'})" />
</div>
这样就可以了。
这个例子实现的是又开始时间有结束时间的情况，可以直接规避掉前边时间大于后边时间的异常情况，不用写js进行判断了，很便利。
如果页面只需要一个时间按钮，那么只写一个<input/>就可以了，为了时间选择的自由，可以在 WdatePicker()方法中，去掉最大最小值的样式。
这只是一个demo，具体需要因个人需求而已，设置不同的参数即可。
如下为样式显示：
第二种样式遇到的问题：
1.明明导入文件没有问题但是就是样式出不来：
可能是因为导入的js文件与程序某些js冲突，产生不完整的情况，可以从网上找下完整版，修改自己的js，加入判断的部分就可以了。
可能js的路径出错了。
