您的位置:首页 > Web前端 > JQuery

JQuery 日期选择框,精确到时分秒类型。

2016-06-12 16:07 771 查看
本文介绍的是jeDate日期控件,关于官方的文档请查看:

http://www.jayui.com/jedate/

本教程源码下载:http://download.csdn.net/detail/tmaskboy/9547160

效果图为:



1.首先引入js文件

<script type="text/javascript" src="jeDate/jedate.js"></script>


2.编写输入框

<input class="datainp" id="dateinfo" type="text" placeholder="请选择"  readonly>


请注意此处id值为dateinfo,下文需要回调该id。

3.编写js渲染

<script type="text/javascript">
jeDate({
dateCell:"#dateinfo",
format:"YYYY年MM月DD日 hh:mm:ss",
isinitVal:true,
isTime:true, //isClear:false,
minDate:"2014-09-19 00:00:00",
okfun:function(val){alert(val)}
})
</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) {} //点击确定后的回调

4.扩展

设置只能选择当前时间之后的日期

添加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;
}


将3中的minDate改为minDate:getNowFormatDate(),

即可将之前日期变为灰色,不可修改。

另外还支持修改皮肤,相关文件和案例代码请点击下载:http://download.csdn.net/detail/tmaskboy/9547160
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: