java前端插件有哪些_【转】几个前端时间插件总结
几个前端时间插件总结
总结一下几款时间插件,分别是 - [ ] jeDate 下载地址 - [ ] bootstrap-datetimepicker 下载地址 - [ ] My97DatePicker 下载地址 - [ ] jQuery UI 插件Datepicker 下载地址
并没有哪款完全超越另外一款,主要还是看是否合适吧。 首先说一下现在项目就在用的 jeDate吧。
jeDate
eDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别,操作等常规功能外,还拥有更多趋近完美的解决方案。 目前只适合PC端。 因为是最近新出的,功能比较完善,支持风格切换,显示节假日,还有很多强大的功能。
如上图所看到的,jeDate 的界面这个样子,值得一提的是,一般时间的input 输入框 是设置为只读的。所以需要其时间插件内部提供清空 调用功能。而下面要说的 bootstrap-datetimepicker 就没有提供这个功能,需要自己修改实现。 同其他插件不同的地方在于,下方有时分秒的选项。点击进入相应的设置界面。需要注意的是 js 中调用方法设置前面后面时间相互制约的限制 代码如下var startDate = jeDate({ dateCell:"#start-date", format:"YYYY-MM-DD hh:mm:ss", isTime:true, isinitVal:true, minDate:jeDate.now(0), choosefun:function(val) { endDate.config.minDate = val; requireDate.config.minDate = val; $("#start-date").blur(); }, okfun:function(val) { endDate.config.minDate = val; requireDate.config.minDate = val; $("#start-date").blur(); } }); var endDate = jeDate({ dateCell:"#end-date", format:"YYYY-MM-DD hh:mm:ss", isTime:true, minDate:jeDate.now(0), choosefun:function(val) { startDate.config.maxDate = val; $("#end-date").blur(); }, okfun:function(val) { startDate.config.maxDate = val; $("#end-date").blur(); } }); var requireDate = jeDate({ dateCell:"#require-date", format:"YYYY-MM-DD", isTime:false, minDate:jeDate.now(0) });
具体参考相关的API
bootstrap-datetimepicker
设置前后时间互相制约的方法// 初始化第三方插件 ArticleManager.prototype.initVendorComponent = function() { // 初始化时间插件 // 设置只能选今天以前的时间 $('#createBeginDate').datetimepicker(datetimePickerOptions).on('show',function(e) { $('#createBeginDate').datetimepicker('setEndDate',new Date());}); $('#createBeginDate').datetimepicker(datetimePickerOptions).on('changeDate',function(e) { $('#createBeginDate').datetimepicker('setEndDate',new Date()); $('#createEndDate').datetimepicker('setStartDate',$(this).val());}); // 设置只能选今天以前的时间 $('#createEndDate').datetimepicker(datetimePickerOptions).on('show',function(e) { $('#createEndDate').datetimepicker('setEndDate', new Date()); }); $('#createEndDate').datetimepicker(datetimePickerOptions).on('changeDate',function(e) { $('#createEndDate').datetimepicker('setEndDate', new Date()); $('#createBeginDate').datetimepicker('setStartDate',$(this).val());}); };
和上面图中所看到的,一个主要的缺陷就是没有原生的清除所选择日期按钮。 我们项目原来用的就是这个插件,后来手动在原生js里面加入了清除按钮。 但去除这一点,这个插件也是没什么问题的。风格是原生的bootstrap 风格,如果需要修改,需要自己个性化定制。 但其实也给出了没有清除按钮的解决办法,forceParse 方法,设置为true 会强制更改用户输入的值,转变为符合规定的近似的值,也就是说这样的话不必把输入框设置成只读的了。 点到为止,其他欢迎去看官方API。这个插件总体上来说也是没什么问题的。
jquery UI 插件Datepicker
目前就我所知,jquery UI 并不是很火的样子,现在前端这些框架更新迭代都很快,以前一些老项目确实有很多直接基于这种框架去做的,组件规范化。使得我们这些后端人员也能做出像模像样的前端页面,但是到现在的互联网确实不够用了。这就需要专业的前端人员和设计人员了,毕竟如果只是单独给企业做项目,更加注重功能的实现,而现在的项目更加注重体验。//等待dom元素加载完毕. $(function(){ $("#selectDate").datepicker({//添加日期选择功能 numberOfMonths:1,//显示几个月 showButtonPanel:true,//是否显示按钮面板 dateFormat: 'yy-mm-dd',//日期格式 clearText:"清除",//清除日期的按钮名称 closeText:"关闭",//关闭选择框的按钮名称 yearSuffix: '年', //年的后缀 showMonthAfterYear:true,//是否把月放在年的后面 defaultDate:'2011-03-10',//默认日期 minDate:'2011-03-05',//最小日期 maxDate:'2011-03-20',//最大日期 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], onSelect: function(selectedDate) {//选择日期后执行的操作 alert(selectedDate); } }); });
如上图所示,原生的也是没有日期的清除和时间的限制(这个不确定了)
现在不是经常使用的插件,但如果需要还是没有问题的,可能需要个性化定制一些。
My97DatePicker
时间比较久远的一款插件,功能还算丰富,支持日期输入查询。 这里我就不再多说。起始日期功能
注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致
有时在项目中需要选择生日之类的日期,而默认点开始日期都是当前日期,导致年份选择非常麻烦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解决此类问题
日期的范围限制也算比价灵活
静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致
你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围11
动态限制
你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天 动态变量表 格式 说明 %y 当前年 %M 当前月 %d 当前日 %ld 本月最后一天 %H 当前时 %m 当前分 %s 当前秒 {} 运算表达式,如:{%d+1}:表示明天
F{} {}之间是函数可写自定义JS代码
示例4-2-1 只能选择今天以前的日期(包括今天)11
示例4-2-2 使用了运算表达式 只能选择今天以后的日期(不包括今天)11
示例4-2-3 只能选择本月的日期1号至本月最后一天11
示例4-2-4 只能选择今天7:00:00至明天21:00:00的日期11
示例4-2-5 使用了运算表达式 只能选择 20小时前 至 30小时后 的日期11
暂时这这么多。
梅花香自苦寒来
posted on 2017-05-27 14:29 wen.ding 阅读(143) 评论(0) 编辑 收藏 所属分类: Best solution
java前端插件有哪些_【转】几个前端时间插件总结相关推荐
- web前端网页设计作业_如何学习网页前端设计培训?
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
- 前端改变div排序_转行学习web前端开发,需要哪些工具和需要学习什么?
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
- 前端怎么自我介绍_实习|猫眼前端面试经历,问问题很关键(已拿offer)
作者:我是高手高手高高手 链接:https://www.nowcoder.com/discuss/198627 来源:牛客网 一面 面试官比较高冷,问了我很多问题有四五个没答上来.首先是自我介绍,没有 ...
- 大脚插件技能栏美化_教你如何通过大脚插件调整界面框体位置
有很多朋友还在询问如何移动自己的头像和目标的头像,的确在现在22寸液晶普及的情况下... 如果不适当地调整好头像的位置.. 我们都要变斜视眼了!^_^ (如下图,头像变到中间了,你可以按喜欢去调整) ...
- react 前端解析二进制流_一年半前端跳槽面试经验(头条、微信、shopee)
在2019年末的时候,突然想搞点大事,思来想去,感觉只有跳槽是最刺激的. 由于我比较懒,不想换城市,所以这次只面试了头条.微信和 shopee.十分幸运,都拿到了 offer.接下来就简单的说下大家关 ...
- modelmap前端怎么取值_【百度】前端开发岗面试题
来都来了 不关注一下吗 二面三面都有手写代码的环节,对于我这种动手能力弱的人来说还是挺吃力.当时提前批投递的是深圳百度,总共只招五个前端,没过也很正常.后面正式批笔试过了,但是要去北京面试,也就直接放 ...
- 前端怎么自我介绍_未雨绸缪,小米前端实习面经
前一篇文章中说到了我准备开一个新系列用于整理周围人面试的一些经历,本文是她面试小米的一份经历,也是这个系列的第一篇文章,投稿人是我同校同学,虽然本科就是一个学校的,但直到研究生才认识,之所以说她未雨绸 ...
- python大漠插件多开_绝地助手_python挪用大漠插件教程04鼠键事宜及基本项目头脑...
pubg辅助_从汉堡加料提及--浅谈C#中的Decorator模式和平精英辅助from win32com.client importDispatchimportosfrom random import ...
- 个人网站开发之前端首次造轮子_篇一【前端大作业】【gowork.fit】
文章目录 一,前言 二,开发目的 三,页面样式 四,顶部导航栏 五,最后 一,前言 最近有一个需求:我采用了纯原生前端,没有使用框架,从0到1达到了百分百原创代码,作为主后端开发的我,前端开发技术非常 ...
- js下拉 selenium_selenium 难定位元素,时间插件,下拉框定位,string
1.元素定位 ID定位元素: findElement(By.id("")); 通过元素的名称定位元素: findElement(By.name("")); 通过 ...
最新文章
- oracle中的聚簇,Oracle数据库的聚簇技术
- java开发webservice的几种方式
- 从json到抽取关键词
- java源码搭建教程_CentOS 7 搭建源码包搭建LNMP环境
- 程序员转实施工程师_只有程序员才能看得懂?程序员:算了,不看了,我得写代码了...
- 第三次学JAVA再学不好就吃翔(part85)--静态导入
- React中父子组件之间的通信
- UI代码练习-视图的层次关系
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 角色权限的配置页面改进优化...
- php面向对象教学笔记,php学习笔记之面向对象编程
- ZeroMQ(java)之负载均衡
- spring 中beanFactory和ApplicationContext的区别
- 概率分布F(x)和概率密度f(x)
- Android 开发自己的网络收音机4——读取XML文件的电台数据
- 查询给定区域内曲面平均高程
- IK 分词器空格支持
- Python与ADB的基情四射(一)——简单命令
- 注意力模型直观理解(Attention Model Intuition)
- windows10 设定和取消定时关机
- html onclick事件无效 巨坑
热门文章
- 计算机报名备注信息填什么,2021年国考报名表中备注栏怎么填
- 毕业设计-基于微信小程序的“睡眠助手”系统
- Leetcode 1346:检查整数及其两倍数是否存在(超详细的解法!!!)
- C#培训视频-《c#中国象棋》界面设计
- CSS技巧(一)——before、after
- 连接oracle时17002,Oracle Errorcode 17002
- android o miui特性,小米Note 3手机迎来MIUI 10 Android O开发版内测
- Oracle 闪回(flashback)数据库到指定时间点
- 流媒体网络协议 -- RTSP
- Java、JSP网上电子商城的设计