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. C++接口的定义与实现的详细过程

    1.接口的定义与实现 所谓的接口,即将内部实现细节封装起来,外部用户用过预留的接口可以使用接口的功能而不需要知晓内部具体细节.C++中,通过类实现面向对象的编程,而在基类中只给出纯虚函数的声明,然后在 ...

  2. 软件开发的一些"心法"

    从事软件开发也有好几年了,和一开始那个懵懵懂懂的小菜鸟相比,自己也感觉到了一些变化. 也许是熟能生巧, 趟过很多坑,但核心的绝不是这些细节的东西. 打个比方,如果说对某种语言的特性和技巧的掌握属于身法 ...

  3. oracle AWR性能监控报告生成方法

    目前相当一部分公司会用到oracle,在做性能测试的时候,对数据库的监控很重要,那么这里先介绍下如何生成oracle自带的awr监控报告,而具体报告的内容分析会放在后续的博客中 oracle性能分析入 ...

  4. H5游戏见缝插针开发

    中秋节马上就要来临,公司开发了一个h5小游戏叉月饼,其实就是游戏“见缝插针”的翻版.这个游戏的开发任务落到了我的头上... 一 游戏介绍 游戏场景基本如下所示:         二 所用工具 这次的开 ...

  5. php 关于经纬度距离计算方法 成功版

    1.PHP实现通过经纬度计算距离 单位为公里 function getdistance($lng1,$lat1,$lng2,$lat2)//根据经纬度计算距离 { //将角度转为狐度  $radLat ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. Day5模块-random模块

    random:随机数 >>> import random>>> print(random.random()) #生成随机小数0.6906362176182085 & ...

  8. TensorFlow for R

    TensorFlow™ is an open source software library for numerical computation using data flow graphs. Nod ...

  9. 利刃 MVVMLight

    已经很久没有写系列文章了,上一次是2012年写的HTLM5系列,想想我们应该是较早一批使用HTML5做项目的人. 相比我当时动不动100+的粉丝增长和两天3000+的阅读量,MVVM Light只能算 ...

  10. spring mvc 存取值

    (转) 1,使用HttpServletRequest获取 @RequestMapping("/login.do") public String login(HttpServletR ...