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 日期选择框，精确到时分秒类型。相关推荐

Vue指定日期选择框的值--自动计算过期时间
在开发过程中,有时需要对日期选择框设置一个默认值(比如当天.前几天或者是后几天)?如何自动计算过期时间?具体怎么实现呢,我们一起来看下. 本文主要根据两个小案例来讲解通过js设定日期控件的值, ...
elementui时间控件限制可选时间范围(精确到时分秒)
elementui时间控件限制可选时间范围(精确到时分秒) 我们在开发web端项目时,时间控件用的非常多,限制可选时间也是比较常见的需求,比如已经过去时间不能选,或这未来的时间不可选等,如果仅仅只是限 ...
倒计时js代码精确到时分秒
倒计时js代码精确到时分秒,使用方法:注意 var EndTime= new Date('2013/05/1 10:00:00'); //截止时间这一句,特别是 '2013/05/1 10:00:0 ...
js计算前三个月的时间精确到时分秒
2019独角兽企业重金招聘Python工程师标准>>> 从系统当前时间计算,前三个月的时间点精确到时分秒 Date.prototype.format = function(forma ...
html日期选择框_第十课日期选择框（datepicker）的操作
有客户问:datepicker是怎么操作的? 我答:datepicker可以直接用"输入文本"组件. 客户说:不是,现在我操作的这个网页上datepicker是不能直接输入的,否则 ...
【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置开始结束时间00:00:00~23:59:59
<nz-range-picker [(ngModel)]="dateRange" nzFormat="yyyy-MM-dd HH:mm:ss" style ...
Ant组件——DatePicker 日期选择框
相关文档 DatePicker 日期选择框业务需求设置两个时间选择框,一个是开始时间,一个是结束时间,两者相互制约,开始不能早于结束,结束不能小于开始代码示例 1.html <a-form ...
前端——》ant-design-vue组件的使用之四（DatePicker 日期选择框和Calendar日历的使用）
日期选择器的赋值与取值效果实现方式如图所示日期选择框的实现代码如下所示 html代码如下: <a-date-picker v-model="form.taskStartAt&qu ...
nui— DatePicker：日期选择框
5.12 DatePicker:日期选择框转至元数据结尾创建: 未知用户 (zhangping),最新修改于: 八月 07, 2015 转至元数据起始创建DatePicker 只需要一个id即可 ...

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

JQuery 日期选择框，精确到时分秒类型。相关推荐

最新文章

热门文章