JQuery 日期选择框

一    jeDate日期控件，关于官方的文档请查看： http://www.jayui.com/jedate/

1 引入js文件

<script type="text/javascript" src="${basePath}/js/jedate.js"></script>

2 input框

<input type="text" placeholder="请输入时间"  id="dateinfo" readonly/>

3 .编写js

<script type="text/javascript">
    jeDate({
        dateCell:"#dateinfo", //此处是input的id
        format:"YYYY-MM-DD hh:mm:ss",
        isinitVal:false,
        isTime:true, //isClear:false,
        festival:true, //是否显示节日
        minDate:getNowFormatDate(),
        okfun:function(val){
        
        }
    });
   //设置只能选择当前时间之后的日期 添加js函数，获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”

    function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
};
</script>

参数详解

dateCell:”#id”, //目标元素。由于jedate.js封装了一个轻量级的选择器，因此dateCell还允许你传入class、tag这种方式 ‘#id .class’ 
isDisplay:false, //是否直接显示日期层，false不直接显示，true直接显示需要displayCell配合 
displayCell:”#id”, //直接显示日期层的容器，可以是ID CLASS 
format:”YYYY-MM-DD hh:mm:ss”, //日期格式 
minDate:”1900-01-01 00:00:00”, //最小日期 
maxDate:”2099-12-31 23:59:59”, //最大日期 
isinitVal:false, //是否初始化时间 
isTime:false, //是否开启时间选择 
ishmsLimit:false, //时分秒限制 
isClear:false, //是否显示清空 
festival:false, //是否显示节日 
zIndex:999, //弹出层的层级高度 
marks:null, //给日期做标注 
choosefun:function(val) {}, //选中日期后的回调 
clearfun:function(val) {}, //清除日期后的回调 
okfun:function(val) {} //点击确定后的回调

将3中的minDate改为minDate:getNowFormatDate(), 
即可将之前日期变为灰色，不可修改。 
另外还支持修改皮肤，相关文件和案例代码请点击下载：http://download.csdn.net/detail/tmaskboy/9547160

二  layDate控件 官方地址 http://www.layui.com/laydate/

获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构） 存放到你项目的任意目录，使用时，只需引入 laydate.js 即可。 下面是一个入门示例：

1 引入js

<script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->

2 添加input输入框

<input type="text" class="demo-input" placeholder="请选择日期" id="test1">

注：此处的class="demo-input"是固定的的  id在js中需要调用

3  编写js

<script>
lay('#version').html('-v'+ laydate.v);

//执行一个laydate实例
laydate.render({
  elem: '#test1' //指定元素
});
</script>