时间控件

最近做了一些前端的时间控件的应用，下边总结一下用的这些控件。

一  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的路径出错了。