JavaScript插件:快速选择日期----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时间插件相关推荐

  1. 几个前端时间插件总结

    几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...

  2. java前端的日期插件_几个前端时间插件总结

    几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...

  3. java前端插件有哪些_【转】几个前端时间插件总结

    几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 下载地址 - [ ] bootstrap-datetimepicker 下载地址 - [ ] My97DatePicker ...

  4. 关于导入My97DatePicker时间插件遇到的问题及解决方案

    开始时单独导入到jsp的空白页面,时间的函数可以发挥作用,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional ...

  5. 工作笔记---js时间插件的使用

    工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现 ...

  6. 动态判断时间插件显示到年月日时分秒

    根据得到的时间格式,动态判断时间插件显示到年月日时分秒 主要split切割字符串来判断 split将一个字符串切割为字符串数组 <!DOCTYPE html> <html>&l ...

  7. bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

    <!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...

  8. 2020-2-15技术积累-时间插件-前端获取后端数据生成表格

    1.一种时间插件的用法 WdatePicker使用方法 https://blog.csdn.net/wuyan1001/article/details/78561363 https://blog.cs ...

  9. 【若依(ruoyi)】datetimepicker日期和时间插件

    目录 前言 官网 控件绑定 `datetimepicker日期和时间插件` 前言 若依(ruoyi) 4.2 thymeleaf 模板 官网 https://github.com/smalot/boo ...

  10. js下拉 selenium_selenium 难定位元素,时间插件,下拉框定位,string

    1.元素定位 ID定位元素: findElement(By.id("")); 通过元素的名称定位元素: findElement(By.name("")); 通过 ...

最新文章

  1. 枚举很好用啊,为啥阿里不建议返回值用枚举?
  2. Android学习之JSON数据解析
  3. UUID介绍与生成方法
  4. Task三个列子的分享
  5. PAT甲级1065 A+B and C (64bit):[C++题解]爆long long,熟悉计算机存储有符号数原理
  6. c语言16x32点阵显示汉字,点阵16*32滚屏显示汉字
  7. contab 手动可以 java_crontab 定时执行脚本出错,但手动执行脚本正常
  8. SQL Server 数据库的整理优化的基本过程(三)
  9. [转] FFmpeg常用基本命令
  10. Asp.Net4.0/VS2010新变化(2):网站自动预热
  11. 公司决策层时刻想着:怎样开展业务,怎样防止公司完蛋
  12. Linux自学,第一天
  13. 批量解除文件锁定状态包含子文件夹
  14. Windows 10 Enterprise LTSC 2019 (x64) 版本 (安装+激活+添加系统邮箱)
  15. 超级详细的H3C模拟器HCL的交换机Telnet服务配置过程(图文)
  16. 英语学习第5篇_并列句
  17. 饱和气压与温度的关系_饱和蒸气压与温度 沸点的关系
  18. Hi3516DV300编译环境搭建问题及解决
  19. php realpath()
  20. Mac安装与配置jmeterjmeter的使用jmeter生成性能测试报告

热门文章

  1. GPS章节要义(补充计算题)
  2. 小学计算机课的微案例,小学信息技术教学案例分析
  3. Windows下使用platform.pk8 和platform.x509.pem生成jks签名文件
  4. oracle数据库赋权_Oracle数据库权限
  5. oracle 数据库怎么启动,Oracle数据库:启动操作
  6. 【雷达与对抗】【2014.06】荷兰人工育滩工程Sand Motor的X波段雷达深度反演模型研制
  7. The Softwares Programer must download
  8. [项目分享]JSP+Servlet+JDBC+DBCP2实现在线购书系统
  9. unity shader可视化工具——Shader Graph
  10. 世上最齐全黑链(隐藏链接)代码大全