首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >JQuery 日期选择框,精确到时分秒类型。

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

作者头像
geekfly
发布2022-05-06 19:33:46
发布2022-05-06 19:33:46
1.9K0
举报
文章被收录于专栏:geekflygeekfly

貌似升级了,官方网址:http://www.jemui.com/uidoc/jedate.html

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

1.首先引入js文件

代码语言:javascript
复制
<script type="text/javascript" src="jeDate/jedate.js"></script>

2.编写输入框

代码语言:javascript
复制
<input class="datainp" id="dateinfo" type="text" placeholder="请选择"  readonly>

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

3.编写js渲染

代码语言:javascript
复制
<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>

具体参数详解:

代码语言:javascript
复制
 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”

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-06-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档