解决laydate时间日期插件定位溢出

laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap

laydate弹出层默认对齐input左边框

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

这就需要修改插件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+"px"

保存,强刷一下页面

正常情况

靠近网页边缘时

已经可以了,本人JS并不是很好,如有更好的方法欢迎分享!O(∩_∩)O

时间: 2024-10-20 20:54:25

解决laydate时间日期插件定位溢出的相关文章

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

开发环境: 语言:PHP 框架:ThinkPHP 问题:在引用插件My97DatePicker时,想实现:开始日期不能大于结束日期,结束时间不能小于开始时间 步骤一.查看文档官方文档http://www.my97.net/dp/demo/index.htm可以看到实现办法如下: 步骤二.按照文档说明,作用于自己代码中: <input name="start_time" type="text" id="start_time" class=&q

laydate JS日期插件

原文出处 简要介绍 你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心雕琢, 兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些 传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她

jquery &nbsp; 时间日期插件

直接上代码  <<!DOCTYPE HTML> <html>   <head>     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">     <link rel="stylesheet" type=&q

其他: 微软拼音输入法 自定义时间日期格式

概述 微软拼音输入法 下, 自定义 时间日期格式 这个功能, 让我真正见识到了, 什么是 鸡肋 背景 因为 cpu 和 内存占用的原因, 我换掉了 qq拼音输入法 至于替代品, 我选择了 win10 自带的 微软拼音 但是也遇到了些问题 微软拼音自带的 时间日期格式, 我不是很喜欢 os win10 1. 问题: 时间日期格式 概述 微软拼音 默认的时间日期格式, 不太适合我 我的需求 输入法自带 时间日期格式 微软拼音有 我需要的格式如下 时间 2020-02-07 12:36:52 日期 2

日期时间选择器插件flatpickr

前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选择器插件的github地址为:https://chmln.github.io/flatpickr/. 2.里面有很多例子,告诉我们呢怎么设置,不过太多很容易让人眼花.我这里做一个最简单的例子. 2.1引用人家的css和js //路径一定要写对 <link rel="stylesheet&quo

日期时间JS插件

首先要引入基本文件:bootstrap的基本js和css文件,因为用到了jquery所以要引入jquery文件 1 <script src="jquery-1.11.2.min.js"></script> 2 <script src="bootstrap.min.js"></script> 3 <link href="bootstrap.min.css" rel="styleshee

纯js可定制的跨浏览器日期时间选择器插件

Rome是一款纯js可定制的跨浏览器日期时间选择器插件.该日期时间选择器不依赖于jQuery,但它依赖于moment.js.可以通过CSS文件来自定义该日期时间选择器的外观样式. 如果你想了解moment的国际化的信息,可以查看这里.你还可以点击这里查看moment的使用方法. 在线演示:http://www.htmleaf.com/Demo/201503091491.html 下载地址:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picke

flatpickr功能强大的日期时间选择器插件

flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能,压缩后的版本仅6K大小. 对手机原生日期格式的支持. 下图说明了使用jQuery UI.Bootstrap.packadate.js和flatpickr拉齐制作一个日期时间选择器时,所需要的文件尺寸大小: 下图是flatpickr日期时间选择器的各种主题效果: 配置参数 在配置参数中,所有的类型为s

js日期插件

推荐一款贤心写的js日期插件,调用非常方便:顺手写了一个demo. 先列举下这款插件的优点:日期范围限制.开始日期设定.自定义日期格式.时间戳转换.当天的前后若干天返回.时分秒选择.智能响应.自动纠错.节日识别.快捷键操作.更换皮肤等. 当然还有很重要的一点是使用简单: 代码如下: <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>data_