jedate时间插件
jedate是一款轻量级JS库,可快速选择日期 http://www.sucaijiayuan.com/Js/DateTime/1371.html
使用方法:
下载jedate , 解压后不要改变文件夹内的目录结构,然后引入jedate.js文件,
<input id="datepicker" placeholder="请选择时间" type="text" readonly/>
var datepickerOptions = {dateCell:"#datepicker", //目标元素。由于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:true, //是否开启时间选择isClear:true, //是否显示清空festival:false, //是否显示节日zIndex:999, //弹出层的层级高度marks:null, //给日期做标注choosefun:function(val) {}, //选中日期后的回调clearfun:function(val) {}, //清除日期后的回调okfun:function(val) {} //点击确定后的回调 }; jeDate(datepickerOptions);
注意一下几点:
1、
dateCell:"#datepicker", //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
指定要填充日期的DOM
2、
format:"YYYY-MM-DD hh:mm:ss", //日期格式
返回日期格式,format不同会导致日历界面的不同,例如:
"YYYY-MM"
"YYYY-MM-DD"
"YYYY-MM-DD hh:mm:ss" 同时设置isTime:true,开启时间选择
常见需求一般是选择一个时间格式,因此设置一个函数,传入三个主要参数:
/** *datePickerInit.js 小工具 使用前提条件-----引入jquery-1.11.3.js jedate.js *domId : 需要填充日期的DOM元素的id 比如是一个input的id *format: 需要填充日期的格式 例如 "YYYY-MM-DD hh:mm:ss" "YYYY-MM-DD hh:00:00" "YYYY-MM-DD hh:59:59" "YYYY年MM月DD日 hh时mm分ss秒" *isTime: 是否开启时间选择 **/ function datePickerInit(domId , format , isTime){var datePickerOptions = {dateCell:"#" + domId, //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'format:format, //日期格式//minDate:"1900-01-01 00:00:00", //最小日期//maxDate:"2099-12-31 23:59:59", //最大日期isinitVal:false, //是否初始化时间isTime:isTime, //是否开启时间选择isClear:true, //是否显示清空festival:false, //是否显示节日zIndex:999, //弹出层的层级高度marks:null, //给日期做标注choosefun:function(val) {}, //选中日期后的回调clearfun:function(val) {}, //清除日期后的回调okfun:function(val) {} //点击确定后的回调 };jeDate(datePickerOptions); }
即可方便的设置要填充的DOM元素
$(function(){datePickerInit("datepicker" , "YYYY-MM-DD hh:mm:ss" , true); });
jedate时间插件相关推荐
- 几个前端时间插件总结
几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
- java前端的日期插件_几个前端时间插件总结
几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
- java前端插件有哪些_【转】几个前端时间插件总结
几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 下载地址 - [ ] bootstrap-datetimepicker 下载地址 - [ ] My97DatePicker ...
- 关于导入My97DatePicker时间插件遇到的问题及解决方案
开始时单独导入到jsp的空白页面,时间的函数可以发挥作用,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional ...
- 工作笔记---js时间插件的使用
工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现 ...
- 动态判断时间插件显示到年月日时分秒
根据得到的时间格式,动态判断时间插件显示到年月日时分秒 主要split切割字符串来判断 split将一个字符串切割为字符串数组 <!DOCTYPE html> <html>&l ...
- bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件
<!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...
- 2020-2-15技术积累-时间插件-前端获取后端数据生成表格
1.一种时间插件的用法 WdatePicker使用方法 https://blog.csdn.net/wuyan1001/article/details/78561363 https://blog.cs ...
- 【若依(ruoyi)】datetimepicker日期和时间插件
目录 前言 官网 控件绑定 `datetimepicker日期和时间插件` 前言 若依(ruoyi) 4.2 thymeleaf 模板 官网 https://github.com/smalot/boo ...
- js下拉 selenium_selenium 难定位元素,时间插件,下拉框定位,string
1.元素定位 ID定位元素: findElement(By.id("")); 通过元素的名称定位元素: findElement(By.name("")); 通过 ...
最新文章
- 枚举很好用啊,为啥阿里不建议返回值用枚举?
- Android学习之JSON数据解析
- UUID介绍与生成方法
- Task三个列子的分享
- PAT甲级1065 A+B and C (64bit):[C++题解]爆long long,熟悉计算机存储有符号数原理
- c语言16x32点阵显示汉字,点阵16*32滚屏显示汉字
- contab 手动可以 java_crontab 定时执行脚本出错,但手动执行脚本正常
- SQL Server 数据库的整理优化的基本过程(三)
- [转] FFmpeg常用基本命令
- Asp.Net4.0/VS2010新变化(2):网站自动预热
- 公司决策层时刻想着:怎样开展业务,怎样防止公司完蛋
- Linux自学,第一天
- 批量解除文件锁定状态包含子文件夹
- Windows 10 Enterprise LTSC 2019 (x64) 版本 (安装+激活+添加系统邮箱)
- 超级详细的H3C模拟器HCL的交换机Telnet服务配置过程(图文)
- 英语学习第5篇_并列句
- 饱和气压与温度的关系_饱和蒸气压与温度 沸点的关系
- Hi3516DV300编译环境搭建问题及解决
- php realpath()
- Mac安装与配置jmeterjmeter的使用jmeter生成性能测试报告
热门文章
- GPS章节要义(补充计算题)
- 小学计算机课的微案例,小学信息技术教学案例分析
- Windows下使用platform.pk8 和platform.x509.pem生成jks签名文件
- oracle数据库赋权_Oracle数据库权限
- oracle 数据库怎么启动,Oracle数据库:启动操作
- 【雷达与对抗】【2014.06】荷兰人工育滩工程Sand Motor的X波段雷达深度反演模型研制
- The Softwares Programer must download
- [项目分享]JSP+Servlet+JDBC+DBCP2实现在线购书系统
- unity shader可视化工具——Shader Graph
- 世上最齐全黑链(隐藏链接)代码大全