做网站|网站建设,就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载!

JQuery日期插件flexDate.js
来源:易助科技网浏览量:3收藏

简介

flexDate.js是一款JQuery日期插件,自定义了一款新新的可爱的时间控件,兼容ie8加。

 


(下载的附件中附有DEMO)

参数说明:

eString必填,文本框的jquery选择器
formatStringyyyy-MM-dd HH:mm:ss时间格式,跟随java.yyyy只显示年份,yyyy-MM则显示到月份,以此类推
valueString/Date文本框里默认显示的值,按format格式书写,可以是Date实例,new Date()表示今天
clearBtnBooleantrue是否显示清空按钮
todayBtnBooleantrue是否显示今天按钮
confirmBtnBooleantrue是否显示确定按钮
minString/Date最小值,可以是Date实例,new Date()表示今天
maxString/Date最大值,可以是Date实例,new Date()表示今天
zIndexInteger999时间控件的层级
bindClickBooleantrue是否对文本框进行点击事件的绑定
confirmFunction确定选取时间后的事件,函数会传进被选取的时间

插件方法:

show显示时间控件
hide隐藏时间控件
setMinvalue'2017-05-04'设置该实例的最小日期,即小于该日期不能够被选取
setMaxvalue'2017-05-04'设置该实例的最大日期,即大于该日期不能够被选取
resetformat'2017-05-04'重置控件,根据format转变时间精度和时间格式


使用

1.  引入文件

<link rel="stylesheet" href="dist/css/flexDate.min.css">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="dist/js/flexDate.min.js"></script>


2.  调用

//类方法设置本页面的皮肤颜色
FlexDate.setSkin('#ff8000');
var date=new FlexDate({
e: '.flexDate1',
format: 'yyyy-MM-dd HH:mm:ss',
value: '2017-07-08 12:30:30',
clearBtn: true,
todayBtn: true,
confirmBtn: true,
min:'2017-07-01',
max:new Date(),
zIndex:999,
bindClick:true,
confirm: function (value) {}
});

快速实例化:

<input type="text" readonly class="flexDate" format="yyyy年MM月dd日" clearBtn="false" confirm="confirm"/>


相关链接

Gitee 地址 :https://gitee.com/wtjperi2003/flexdate

在线演示 :https://wtjperi2003.oschina.io/flexdate/