解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap
1. 默认情况
laydate弹出层默认对齐input左边框

2. 定位溢出
但是当这个input比较靠页面右边的时候就会出现弹出层一部分溢出的问题

3. 解决定位
需要修改插件JS文件,使其能够判断是否溢出并修复定位
找到JS文件laydate.js
首先找到设置定位代码
a.style.left=e.left+(b?0:c.scroll(1))+"px"
将其修改为
var boxWidth = parseFloat(a.clientWidth); // 日期对象宽度
var leftWidth = parseFloat(e.left); // 左偏移像素
var bodyWidth = parseFloat(document.body.clientWidth); // 屏幕可见区域宽度
if (boxWidth + leftWidth > bodyWidth) {
var leftPX = bodyWidth - boxWidth;
} else {
var leftPX = leftWidth;
}
a.style.left=leftPX+(b?0:c.scroll(1))+"px"
保存,强刷一下页面
正常情况

靠近网页边缘时

已经可以了,如有更好的方法欢迎分享!O(∩_∩)O
解决laydate时间日期插件定位溢出的更多相关文章
- 一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
- jQuery时间日期插件laydate,兼容bootstrap
解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...
- 解决:My97DatePicker 日期插件引用在PHP文件中maxDate和minDate控制失效问题
开发环境: 语言:PHP 框架:ThinkPHP 问题:在引用插件My97DatePicker时,想实现:开始日期不能大于结束日期,结束时间不能小于开始时间 步骤一.查看文档官方文档http://ww ...
- 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)
最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...
- laydate JS日期插件
原文出处 简要介绍 你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生Jav ...
- 【vue学习】vue中怎么引用laydate.js日期插件
此贴意在解决一个妹子的问题 https://q.cnblogs.com/q/101462 下载js包 http://www.layui.com/laydate/ 将laydate下载的包解压放入sta ...
- Angular4.0引入laydate.js日期插件方法
Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...
- jq时间日期插件的使用-datetimepicker
分三步 首先引入各种包 然后搞哥容器用id 然后加入一段js 实例: 下载:http://files.cnblogs.com/files/wordblog/datetimepicker-maste ...
- Python3 与 C# 面向对象之~继承与多态 Python3 与 C# 面向对象之~封装 Python3 与 NetCore 基础语法对比(Function专栏) [C#]C#时间日期操作 [C#]C#中字符串的操作 [ASP.NET]NTKO插件使用常见问题 我对C#的认知。
Python3 与 C# 面向对象之-继承与多态 文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录: 2.继承 ¶ 2.1.单继 ...
随机推荐
- Java AOP (1) compile time weaving 【Java 切面编程 (1) 编译期织入】
According to wikipedia aspect-oriented programming (AOP) is a programming paradigm that aims to inc ...
- 二分图的最大匹配——最大流EK算法
序: 既然是个图,并且求边数的最大值.那么这就可以转化为网络流的求最大流问题. 只需要将源点与其中一子集的所有节点相连,汇点与另一子集的所有节点相连,将所有弧的流量限制置为1,那么最大流 == 最大匹 ...
- python3 time模块与datetime模块
time模块 在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时间字符串 3)元组(struct_time)共九个元素.由于Python的time模块实现主要调用C库,所以各个平 ...
- hadoop集群的节点启动问题
start-all.sh 启动集群时,NameNode或DataNode节点启动不了,但之前可以启动. 查看hadoop中hdfs-site.xml配置文件 <property> < ...
- OpenStack Newton版本Ceph集成部署记录
2017年2月,OpenStack Ocata版本正式release,就此记录上一版本 Newton 结合Ceph Jewel版的部署实践.宿主机操作系统为CentOS 7.2 . 初级版: 192. ...
- 命令模式(Command Pattern)
命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式.命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求 ...
- Fast Walsh-Hadamard Transform——快速沃尔什变换
模板题: 给定$n = 2^k$和两个序列$A_{0..n-1}$, $B_{0..n-1}$,求 $$C_i = \sum_{j \oplus k = i} A_j B_k$$ 其中$\oplus$ ...
- ztree实现权限功能(横向显示)
最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不 ...
- java基础阅读卷1整理(待更新)
JAVA语言的一些简单摘要,分为11点 1.简单性2.面相对象3.网络技能(Network-Savvy)4.健壮性5.安全性 6.体系结构中立7.可移植性8.解释型9.高性能10.多线程11.多态性 ...
- 在Spring、Hibernate中使用Ehcache缓存(2)
这里将介绍在Hibernate中使用查询缓存.一级缓存.二级缓存,整合Spring在HibernateTemplate中使用查询缓存.,这里是hibernate3,使用hibernate4类似,不过不 ...