jquery 时间选择插件-jedate

原创 2016年03月28日 09:48:25

标签：
jquery-jed

　引言

日期选择插件有很多，今天说一说jedate

　源代码

github

快速上手

使用对象

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

使用方法

<script type="text/javascript">
jeDate({dateCell:"#indate",//isinitVal:true,format:"YYYY-MM-DD",isTime:false, //isClear:false,minDate:"2014-09-19 00:00:00"
})
jeDate({dateCell:"#dateinfo",isinitVal:true,isTime:true, //isClear:false,minDate:"2014-09-19 00:00:00"
})
</script>

核心方法：jeDate(options)

options是一个对象，它包含了以下key: '默认值'dateCell:"#id", //目标元素。由于jedate.js封装了一个轻量级的选择器，因此dateCell还允许你传入class、tag这种方式 '#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, //是否开启时间选择isClear:true, //是否显示清空festival:false, //是否显示节日zIndex:999,  //弹出层的层级高度marks:null, //给日期做标注choosefun:function(val) {},  //选中日期后的回调clearfun:function(val) {},   //清除日期后的回调okfun:function(val) {}       //点击确定后的回调

【自定义日期格式】

<div id="test1" class="jedate-icon"></div>
<script>
jeDate({dateCell: '#test1',format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月festival: true, //显示节日choose: function(datas){ //选择日期完毕的回调alert('得到：'+datas);}
});
</script>

【日期范围限定在昨天到明天】

<div id="hello3" class="jedate-icon"></div>
<script>
jeDate({dateCell: '#hello3',minDate: jeDate.now(-1), //0代表今天，-1代表昨天，-2代表前天，以此类推maxDate: jeDate.now(1) //1代表明天，2代表后天，以此类推
});
</script>

【图标或其他按钮触发日期】

<input class="datainp" id="datebut" type="text" placeholder="请选择"  readonly>
<input type="button" onClick="jeDate({dateCell:'#datebut',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})" value="打开">

具体查看： http://www.jemui.com/ JEUI 前端框架包括对独立组件Jedate组件

jedate插件的使用相关推荐

富文本wangEditor插件层级问题
关于wangEditor层级过高的问题前两天做了一个后台系统的项目,这个网站是个新闻类的网站,后台主要就是做一些文章的发表和管理.长这样: 写文章发表页面的时候我用到了 wangEditor 和 j ...
阅读分析程序源代码的一些方法（转载整理）
前言最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文摘自(繁体中文Traditiona ...
pagination分页、jedate日期、wangEditor富文本插件使用总结
插件的使用 1. 导包 2. 写HTML结构 3. 初始化 pagination分页插件官方文档:http://josecebe.github.io/twbs-pagination/ Demo: 1 ...
几个前端时间插件总结
几个前端时间插件总结总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
CDN公共库、前端开发常用插件一览表(VendorPluginLib)
============================================================= ==========================前端CDN公共库==== ...
java前端的日期插件_几个前端时间插件总结
几个前端时间插件总结总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
java前端插件有哪些_【转】几个前端时间插件总结
几个前端时间插件总结总结一下几款时间插件,分别是 - [ ] jeDate 下载地址 - [ ] bootstrap-datetimepicker 下载地址 - [ ] My97DatePicker ...
Alibaba代码规范插件、FindBugs插件安装及详解，IDEA插件安装，代码规范，代码查错，代码格式规范
这是帮助开发者规范代码,培养优良的编码习惯的两个IDEA插件
IDEA的Docker插件实战(Dockerfile篇)
IDEA的Docker插件实战(Dockerfile篇) IntelliJ IDEA的Docker插件能帮助我们将当前工程制作成Docker镜像.运行在指定的远程机器上,是学习和开发阶段的好帮手,本文 ...
IDEA集成Docker插件实现一键自动打包部署微服务项目
一. 前言大家在自己玩微服务项目的时候,动辄十几个服务,每次修改逐一部署繁琐不说也会浪费越来越多时间,所以本篇整理通过一次性配置实现一键部署微服务,实现真正所谓的一劳永逸. 二. 配置服务器 1. ...

jedate插件的使用

jquery 时间选择插件-jedate

引言

源代码

快速上手

jedate插件的使用相关推荐

最新文章

热门文章