自定义一个月份选择器插件
这里笔者制作了一个简单还算美观的月份选择器,来实现年月份随意选择的需求。
实际开发中可能会碰到这样的需求,只需要选择年月份就可以,不需要其他日期,时间等的选择,有些日期了的插件较大,杀猪焉用宰牛刀,没必要去引用那些东西,所以笔者就自己编写了一个简单的月份选择插件。先看效果图:
下面是插件js源码:
(function($) {var MonthPicker = function(dom, options) {this.$dom = dom,this.defaults = {currentYear: '',},this.opts = $.extend({}, this.defaults, options)}/*** 添加渲染页面和数据的方法* */MonthPicker.prototype = {renderMonthPicker: function() {var self = this;this.$dom.focus(function(event) { self.opts.currentYear = new Date().getFullYear(); $('body').find('.mp-month-picker-box').empty().remove(); $('body').append('<div class="mp-month-picker-box" style="left:' + $(this).position().left + 'px;top:' + ($(this).position().top + 40) + 'px;">' + '<i></i>' + '<div class="mp-year-picker">' + '<div class="mp-prev-year"><i></i><i></i></div>' + '<span>' + self.opts.currentYear + '</span>' + '<div class="mp-next-year"><i></i><i></i></div>' + '</div>' + '<ul class="mp-month-picker">' + '<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>' + '</ul>' + '</div>'); })},handleClick: function() {var self = this;this.$dom.blur(function() { var innerSelf = this; $('div.mp-prev-year').click(function() { $(this).next().html(--self.opts.currentYear); }) $('div.mp-next-year').click(function() { $(this).prev().html(++self.opts.currentYear); }) $('ul.mp-month-picker li').click(function(event) { var value = self.opts.currentYear + '-' + $(this).html(); $(innerSelf).val(value); $(this).parent().parent().empty().remove(); }) })},constructor: MonthPicker};$.fn.MonthPicker = function(options) {var monthPicker = new MonthPicker(this, options);monthPicker.renderMonthPicker();monthPicker.handleClick();return this.each(function() {});}
})(jQuery)
使用的时候,需要配合input输入框一起使用,示例如下:
$('#startTime').MonthPicker();
具体的样式表现,笔者就不在这里进行说明了,感兴趣的读者可以直接去下方的连接去下载。
github源码链接
csdn资源下载链接
自定义一个月份选择器插件相关推荐
- html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件.该jquery日期选择器提供多个配置参数和方法,可以创建响应式的.灵活的.多种主题效果的日期范围选择器.它的特点还有: 内置 ...
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- html4 form日期,bootstrap4日期时间选择器插件
这是一款bootstrap4日期时间选择器插件.该bootstrap4日期时间选择器插件提供大量配置参数,可以基于bootstrap4制作出简单实用的日期选择器效果.它的特点还有: 支持语言国际化和t ...
- EXCEL 2003-2016 日期选择器插件 支持64位系统
EXCEL 2003-2016 日期选择器插件 支持64位 使用简单且漂亮的EXCEL日期选择器插件 效果如下: Download now for Excel 2007 – 2016 Download ...
- Vue3学习之旅--Vue3高级语法补充-自定义指令,vue插件,Teleport......
文章目录 Vue3高级语法补充 自定义指令 认识自定义指令 实现方式一:默认实现 实现方式二:局部自定义指令 方式三:自定义全局指令 指令的生命周期 指令的参数和修饰符 自定义指令练习 时间格式化指令 ...
- bootstrap4日期时间选择器插件
一.引入文件 bootstrap的版本号是个很令人头大的问题,这里提供一下我使用的版本号 <link rel="stylesheet" href="https:// ...
- html css 范围选择框,jquery日期范围选择器插件
这是一款jquery日期范围选择器插件.该jquery日期范围选择器插件基于bootstrap,它提供日期范围选择功能,字符串本地化功能,时间选择功能等,功能非常强大. 使用方法 该jquery日期范 ...
- 如何创建一个基础jQuery插件
如何创建一个基础插件 How to Create a Basic Plugin 有时你想使一块功能性的代码在你代码的任何地方有效.比如,也许你想调用jQuery对象的一个方法,对该对象进行一系列的操作 ...
- vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器 最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
最新文章
- 为什么Rust连续4年获“最受喜爱编程语言”?
- 保存csv时, 不保留index
- 完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题
- WPF Dispatcher介绍
- linux split 命令 大文件 文件 分块 分割
- 网络推广外包专员浅析货拉拉坠车事件后宣布整改增加录音录像功能
- 嵌入式烤箱能不能放台面上_2021年开放式厨房怎么设计?先来做做嵌入式家电的功课吧!...
- Java JDK1.8新特性之四大函数式接口
- C#中 标识符“XXX”不符合 CLS
- 使用CSS3 Animation实现输入文字动画
- 12-静态代理设计模式-为了引出spring动态代理
- 服务器pci光卡 系统不显示,工控机系统读取不到PCI卡的原因及解决办法
- win10和ubuntu双系统,切换优先启动
- 素数筛【埃筛,欧拉筛(线性筛)】
- Ubuntu系统直接拷贝硬盘克隆
- 软件测试的基础知识(四)
- Windows 10为强化资安防御 这些IT人最关心的事
- asps英文_车用英语怎么说
- 【干货】一文详解计算机视觉的广泛应用:网络压缩、视觉问答、可视化、风格迁移等
- 【Nav2中文网】三、导航相关概念
热门文章
- python 矩阵类型转换_Python3 列表,数组,矩阵的相互转换的方法示例
- 秦九韶算法递推公式_如何教会女友递归算法?
- platform_driver_register()--如何match之后调用probe
- (2)散列表是怎么进行查找的
- NAND FLASH读写原理
- 详解Modbus通信协议---清晰易懂
- 【Python】main函数 if __name__=='__main__' 详解
- java简单功能测试,java 自动化测试小功能集锦
- 跨系统服务器data,跨服务器的数据整合方法及系统 Cross-server data integration method and system...
- html div图片定位,html中div定位练习