最近项目中报表统计需要按照月份进行统计,以前用的jq-ui的插件,里面集成的是年月日,修改了好久,觉得太过麻烦,就换了个思路,由于赶时间,所以就度娘了,找到了一个很简洁又简单的Demo,但是发现和我的需求有点差异,第一个是年份做为入参不太合理,一般是当前年份的前后十年,第二个是选中了年月之后,下次点击该控件最好进行回显,所以针对这两个需求,我对该插件做了个补充,当然很感谢原作者的demo和思路。项目思路来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/341.html。下面看看简单的代码结构:

做修改的部分,下面截图说明,第一个是CSS,加入了选中时的样式:

然后是在JS中把年份设置

最后是,当点击了月份的时候,获取设置的月份值,然后是在show显示的时候进行回显设置,如下:

到此为止,修改完毕,也完全符合了项目的需求,下面附上效果图:

  按照UI的要求,说是最好选中当前年份的时候,给当前月份一个默认选中,年份进行选择的时候,也最好能实现这个效果,所以又花了一点时间研究修改了一下代码,最终实现了这个效果。下面附上更新后的demo地址,有需要的可以下载使用,欢迎讨论,demo地址:https://github.com/WangHao1221/jqwithMonthPicker.git别忘记给星星啊,谢谢!

jq集成月份插件(不要年月日,只要年月)的更多相关文章

  1. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  2. 记录一次bug解决过程:eclipse集成lombok插件

    一 总结 eclipse集成插件lombok: 启动Spring Boot项目: sublime全局搜索关键字:ctrl + shift + F JDK8中的lambda表达式使用 二 BUG描述:集 ...

  3. Struts2之—集成Json插件实现Ajax

       上篇博客介绍了Struts2中自己定义结果集实现Ajax,也分析了它的缺点:这样自己定义的结果集,写死了,不能做到client须要什么数据就传什么数据:Struts2之-自己定义结果集实现aja ...

  4. sublime 集成git插件,及git常用命令

    以前用了很久的totoiseSVN,显然不够高大上,开发界的版本装x利器还得是git.然而git的命令行对没怎么用过linux的人可能觉得还不如用gitGUI,可是当你知道sublime可以集成git ...

  5. jq.paginator分页插件稍加修改

    样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...

  6. eclipse集成dorado5插件

    dorado5最好使用jdk1.6 32位,与eclipse j2ee indigo版本兼容最好.其他eclipse版本貌似view编辑时按钮点击事件不生效... 现附上安装包链接(均为官方版本): ...

  7. Jetty入门(1-2)eclipse集成jetty插件并发布运行应用

    一.eclipse集成jetty插件 1.从市场安装jetty插件 2.使用jetty插件发布应用和配置运行环境 debug配置默认共用上述run配置 3.使用jetty插件启动运行和停止运行选中的应 ...

  8. eclipse集成testng插件

    一.TestNG简介 TestNG是一个开源自动化测试框架,它受到JUnit和NUnit的启发,而引入了许多新的创新功能,如依赖测试,分组概念,使测试更强大,更容易做到. 它旨在涵盖所有类别的测试:单 ...

  9. Eclipse集成Hadoop插件

    一.Eclipse集成Hadoop插件 1.在这之前我们需要配置真机上的hadoop环境变量 注:在解压tar包的时候普通解压会出现缺文件的现象,所以在这里我们需要用管理员的方式启动我们的解压软件(我 ...

随机推荐

  1. kali中安装arpspoof 报错

    情境今天在使用arpspoof这个命令的时候,提示没有命令找不到,此时就想着安装一下没想到,碰上kali源不支持的问题  解决所以,此时需要做的就是安装阿里云或者其他镜像  步骤1. vim /etc ...

  2. 简单的JSON数组转树形结构

    function toTree(data) { let result = [] if(!Array.isArray(data)) { return result } data.forEach(item ...

  3. Web设计

    架构:配置中心(数据发布与订阅),配置共享,服务发现,微服务鉴权,网关,负载均衡, 设计:分布式锁,延时队列 业务:日志.链路跟踪,灰度, 日志:(面向领域.业务.基础架构) 通信协议:http(1. ...

  4. 3、架构--cp、scp、rsync、实时监控与同步

    笔记 1.晨考 1.VPN的搭建步骤 2.vpn中的iptables是什么作用? 网络转发 2.昨日问题 1.yum源问题 2.VPN链接正常,但是没办法通过172 3.VPN链接时,出现了DNS错误 ...

  5. Solution -「NOI 2021」「洛谷 P7740」机器人游戏

    \(\mathcal{Description}\)   Link.   自己去读题面叭~ \(\mathcal{Solution}\)   首先,参悟[样例解释 #2].一种暴力的思路即为钦定集合 \ ...

  6. Solution -「CF 494C」Helping People

    \(\mathcal{Description}\)   Link.   给定序列 \(\{a_n\}\) 和 \(m\) 个操作,第 \(i\) 个操作有 \(p_i\) 的概率将 \([l_i,r_ ...

  7. mysql视图,索引

    一.视图 View 视图是一个虚拟表,是sql语句的查询结果,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据,在使用视图时动态生成.视图的数据变化会影响到基表,基表的数据变化也会 ...

  8. BeanFactory与FactoryBean有什么区别?

    相同点:都是用来创建bean对象的 不同点:使用beanFactory创建对象的时候,必须要遵循严格的生命周期流程,太复杂了,如果想要简单的自定义某个对象的创建,同时创建好的对象想要交给spring来 ...

  9. git忽略文件权限检查

    如题  每个人本地设置不同 系统不同  环境不同  很有可能在团队开发的时候进行 不同文件权限的设置 但是如果大家都把这种权限的设置传上去 那么所有人的就都乱的 如果要去掉的话 第一步 进入这个项目的 ...

  10. 简述LSM-Tree

    LSM-Tree 1. 什么是LSM-Tree LSM-Tree 即 Log Structrued Merge Tree,这是一种分层有序,硬盘友好的数据结构.核心思想是利用磁盘顺序写性能远高于随机写 ...