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. HTTP协议详解以及URL具体访问过程

    1.简介 1.1.HTTP协议是什么? 即超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.从 ...

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

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

  3. DTCMS插件的制作实例电子资源管理(三)前台模板页编写

    总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...

  4. [大数据]-Elasticsearch5.3.1+Kibana5.3.1从单机到分布式的安装与使用<2>

    前言:上篇[大数据]-Elasticsearch5.3.1+Kibana5.3.1从单机到分布式的安装与使用<1>中介绍了ES ,Kibana的单机到分布式的安装,这里主要是介绍Elast ...

  5. JS第二弹:用Jquery组装html标签,输出到页面

    用Ajax从服务端获取数据,遍历到表格中(其实将表格替换了),中间发现不能为新增的元素绑定事件,原来是没有将其作为JQ对象

  6. GitExtensions-2.48安装详细教程

    在安装GitExtensions时你可能遇到如下问题,如果出现此提示,则先退出安装,去下载安装.NET Framework4.0之后,再启动GitExtension的安装. 开始进行安装: 安装完成, ...

  7. Python的RSA加密和PBE加密

    最近在写接口的时候,遇到了需要使用RSA加密和PBE加密的情况,对方公司提供的DEMO都是JAVA的,我需要用python来实现. 在网上搜了一下,python的RSA加密这块写的还是比较多的,但是P ...

  8. CI Weekly #19 | 关于软件开发模型的思考,以及最新 CI/CD 实践分享

    五月一来,夏天便悄然而至.flow.ci 也带来了几个新的变化,帮你进一步优化开发工作流.一起来看看这几个重点功能: 支持 iOS 项目 Xcode8.3 构建 iOSer 们重点来了,flow.ci ...

  9. H5与客户端联调

    进行H5移动端开发时,我们可以使用谷歌浏览器的设备工具栏进行,此方法实时方便快速,但这也是有限的,当我们需要在特定机型特定系统或者在webview中调试时,这种方法就显得很吃力了. 安卓: 一.与安卓 ...

  10. 2.Java 加解密技术系列之 MD5

    Java 加解密技术系列之 MD5 序 背景 正文 结束语 序 上一篇文章中,介绍了最基础的编码方式 — — BASE64,也简单的提了一下编码的原理.这篇文章继续加解密的系列,当然也是介绍比较基础的 ...