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时间日期插件定位溢出的更多相关文章

  1. 一款好用的JS时间日期插件layDate

    觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...

  2. jQuery时间日期插件laydate,兼容bootstrap

    解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...

  3. 解决:My97DatePicker 日期插件引用在PHP文件中maxDate和minDate控制失效问题

    开发环境: 语言:PHP 框架:ThinkPHP 问题:在引用插件My97DatePicker时,想实现:开始日期不能大于结束日期,结束时间不能小于开始时间 步骤一.查看文档官方文档http://ww ...

  4. 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)

          最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...

  5. laydate JS日期插件

    原文出处 简要介绍 你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生Jav ...

  6. 【vue学习】vue中怎么引用laydate.js日期插件

    此贴意在解决一个妹子的问题 https://q.cnblogs.com/q/101462 下载js包 http://www.layui.com/laydate/ 将laydate下载的包解压放入sta ...

  7. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  8. jq时间日期插件的使用-datetimepicker

    分三步  首先引入各种包 然后搞哥容器用id  然后加入一段js 实例: 下载:http://files.cnblogs.com/files/wordblog/datetimepicker-maste ...

  9. 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.单继 ...

随机推荐

  1. codeforce vk cup2017

    D. k-Interesting Pairs Of Integers time limit per test 2 seconds memory limit per test 256 megabytes ...

  2. 发送验证码(××s后重新发送)

    html: <input class="tel" type="text" name="tel" placeholder="手 ...

  3. Thinkphp3.2学习——架构_URL模式

    入口文件是应用的单一入口,对应用的所有请求都定向到应用入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作: http://serverName/index.php/模块/控制器/操作 这是 ...

  4. NancyFx 2.0的开源框架的使用-Stateless

    同样和前面一样新建一个空的Web项目,都在根目录添加Module,Models,Views文件夹 添加Nuget包 在Models文件夹里面添加UserModel类 public string Use ...

  5. swift 可选类型(optional)

    可选类型定义 Swift 标准库中定义后缀  ?为可选类型 Optional<Wrapped> 的语法糖,这里语法糖可以简单理解为一种便捷的书写语法.也就是说,下面两个声明是等价的: va ...

  6. CentOS系统搭建gitolite服务

    1.安装相关支持软件 a.$yum install perl-Time-HiRes openssh-server perl -y b.$yum -y install git 2.服务端操作:创建git ...

  7. nodeJS中的包

    前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...

  8. NodeJs的包漏洞扫描与漏洞测试攻击

    一个典型的Node应用可能会有几百个,甚至上千个包依赖(大部分的依赖是间接的,即下载一个包,这个包会依赖其他的好多包),所以最终的结果是,应用程序就会像是这个样子的:

  9. Promise (2) 基本方法

    "I'm Captain Jack Sparrow" 加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆). 为了周天能去看电影,要赶紧 ...

  10. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...