本文主要是介绍JQuery 日期选择框,精确到时分秒类型。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
貌似升级了,官方网址:http://www.jemui.com/uidoc/jedate.html
本教程源码下载: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
这篇关于JQuery 日期选择框,精确到时分秒类型。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!