laydate 时间控件去掉秒以及解决在移动端不能滑动的问题

一、时间控件去掉秒,保留时分
二、时间控件在移动端不能滚动

一、时间控件去掉秒,保留时分

方法一:使用 ready 回调函数

ready 控件在打开时触发。打开控件时让秒消失。

<script>
laydate.render({elem: '#endTime', //指定元素trigger: "click",type: 'time',format:'HH:mm',ready: noSecond(date)
});
function noSecond(date){$(".layui-laydate-list>li:last").css("overflow","hidden");$(".layui-laydate-list>li").css("width", "50%")
}
</script>

在这里插入图片描述
因为控件内置的样式中含有动画效果,所以这样写完用户体验不是很好。


方法二:使用css

参考-一粒小米-博客

<style>.laydate-time-list{padding-bottom:0;overflow:hidden}.laydate-time-list>li{width:50%!important;}.laydate-time-list>li:last-child { display: none;}.laydate-time-list ol>li:last-child{margin-bottom:.26rem;} /*这里0.26rem大概13像素,添加这个的原因是最后一个选项会被遮挡住,要把它显示出来*/
</style>

在这里插入图片描述



二、时间控件在移动端不能滚动

在这里插入图片描述

当我打开时间控件时,鼠标放在时分上不能滚动,但是我点击选中可见区域的时分后,滚动条就能出现。。。打开控制台选择元素发现有这样一条样式:
在这里插入图片描述
于是改了 overflow:hidden;overflow-x: hidden !important;overflow-y:auto !important;,效果出现了。

<style>.laydate-time-list ol{overflow-x: hidden !important;overflow-y:auto !important;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Entity Framework Code First属性映射约定 转载https://www.cnblogs.com/libingql/p/3352058.html

Entity Framework Code First属性映射约定 Entity Framework Code First与数据表之间的映射方式有两种实现&#xff1a;Data Annotation和Fluent API。本文中采用创建Product类为例来说明tity Framework Code First属性映射约定的具体方式。 1. 表名及所有者 在默认约定的情况下…

应用的大数据:医疗保健的经济学

这次我的标题不太挑衅&#xff0c;因为我的上一篇博客文章&#xff08;http://brianoneill.blogspot.com/2014/04/big-data-fixes-obamacare.html&#xff09;显然煽动了政治大战。 在本文中&#xff0c;我希望通过详细介绍大数据如何以无党派方式帮助我们的医疗保健系统来避免…

innerHTML的用法

<!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css">#div1 {width: 200px;height: 200px;border: 1px solid black;} </style> </head><bo…

3G门户宣讲+笔试

作为一个门户网站&#xff0c;估计盈利模式同sina、sohu没啥差异。而3G就专注于手机。有点担心被人抄袭或者本来的大门户网站发展手机门户之后&#xff0c;3G的优势在哪里。 就宣讲会自身宣传来看&#xff0c;主持人估计是市场/销售的&#xff0c;很活泼&#xff0c;送礼物带动…

layui 时间控件二次渲染,点击一个自定义按钮清空/重置时间控件

标题小标题一、错误尝试二、时间控件二次渲染的3种方法2.1 直接删除原来绑定时间控件的DOM&#xff0c;再重新渲染&#xff08;推荐&#xff09;&#xff1b;2.2 使用 clone() &#xff0c;并且改变 lay-key&#xff1b;2.3 使用 clone() &#xff0c;并且删除 lay-key&#xf…

2019年春第二次课程设计实验报告

一、试验项目名 贪吃蛇 二、试验功能介绍 通过数组构造小蛇&#xff0c;在通过数组中的变化控制小蛇移动和变长。 三、项目模块结构介绍 构造小蛇 小蛇移动 移动中碰到边框或自己失败 小蛇长大 四、实现界面展示 五、代码托管链接https://gitee.com/t001023/software_class_1_t…

Elasticsearch用例:全文搜索

在本系列有关Elasticsearch用例的最后一篇文章中&#xff0c;我们介绍了Elasticsearch提供的用于存储甚至大量文档的功能 。 在这篇文章中&#xff0c;我们将研究其另一个核心功能&#xff1a;搜索。 我正在利用上一篇文章中的某些信息&#xff0c;因此&#xff0c;如果您还没有…

使用echarts时,鼠标首次移入屏幕会闪动,屏幕会出现滚动条

当我刷新&#xff0c;鼠标经过图表时&#xff0c;页面会出现滚动条 原因&#xff1a; 在echarts图表中出现 tooltip 时&#xff0c;画布的父标签&#xff08;即&#xff1a;echarts.init()的标签&#xff09;的宽高有时会发生变化&#xff0c;导致相对布局的div可能大小发生…

python正则计算器写法、用正则来匹配

1.# a 1-2*((60-30(-40/5)*(9-2*5/37/3*99/4*299810*568/14))-(-4*3)/(16-3*2)) 利用正则计算不用eval exec 思路&#xff1a; (1)先把内层的小括号匹配出来,从里向外,(2)然后计算小括号里面乘除的值,然后计算加减的值(3)把计算好的结果进行替换,[字符串的替换]""&q…

网页 添加QQ/MSN/旺旺 在线聊天代码

很多时候我们都喜欢在博客里加上自己的IM联系方式&#xff0c;如QQ&#xff1a;xxxxx之类的&#xff0c;为了方便别人与我们聊天和知道我们是否在线&#xff0c;添加在线图标就是一个不错的创意&#xff0c;当你在线时&#xff0c;你网页上的IM图标将是亮着的&#xff0c;非常方…

如何写一个作用域安全的构造函数

基础部分 构造函数本质上就是一个使用new操作符调用的函数&#xff0c;使用new调用时&#xff0c;构造函数内用到的this对象会指向新创建的对象实例&#xff1a; function Girlfriend(name, age, height) {this.name name;this.age age;this.height height; }// 使用new操…

使用Java 8 Lambda清理JUnit Throwable-Tests

最近&#xff0c;我参与了一个关于twitter和google 的简短在线讨论&#xff0c;其中涉及一个问题&#xff0c;即Java 8 Lambda表达式的到来为什么使catch-exception库 1过时了。 这是由简短的声明触发的&#xff0c;该声明将不再维护该库&#xff0c;因为lambda将使其变得多余。…

封装 axios 请求

vue 封装 js 方法 一、安装 axios 并引入&#xff1a; Axios 中文说明 安装axios&#xff1a;npm install axios因为基本上全局都会使用到 axios 方法&#xff0c;所以在 main.js 中引入&#xff1a; import axios from axios; Vue.prototype.$axios axios //全局注册&…

Response.Redirect 编码的问题

UTF-8 传递到 gb2312 HttpUtility.UrlEncode("要传递的字符参数",Encoding.GetEncoding("GB2312"))转载于:https://www.cnblogs.com/JensonBin/archive/2010/11/27/1889726.html

P1553 数字反转(升级版)

P1553 数字反转&#xff08;升级版&#xff09; 温馨提示 1.在处理小数的时候注意处理末尾的0&#xff0c;反转后末尾不得有多余的0 &#xff08;判断的时候 s[ i ] ! 0 判断的是字符&#xff09; 2.处理小数和分数的时候&#xff0c;要符号前后分别输出&#xff0c; flag标…

http协议以及防盗链技术

http协议&#xff0c;又称为超文本传输协议&#xff0c;顾名思义&#xff0c;http协议不仅能传输文本&#xff0c;还能传输图片&#xff0c;视频&#xff0c;压缩包等文件&#xff0c;http协议是建立在tcp/ip协议的基础之上的&#xff0c;http协议对php程序员来讲可以说是重中之…

移动端 flexible.js 布局详解

原本想直接引入原文链接&#xff0c;但是又担心作者哪天想不开注销账号&#xff0c;这么好的一篇文章看不到了&#xff0c;还是转载一下吧(/ω&#xff3c;)。 另外推荐一篇好文&#xff1a;移动端rem自适应实操讲解 本文讲的通过 flexible.js 实现了rem自适应&#xff0c;有了…

Gradle善良:获得更多的依赖性见解

在我们的大多数项目中&#xff0c;我们都依赖于其他代码&#xff0c;例如库或其他项目。 Gradle有一个不错的DSL来定义依赖关系。 依赖性在依赖性配置中分组。 这些配置可以自己创建&#xff0c;也可以通过插件添加。 一旦定义了依赖项&#xff0c;我们就可以通过dependencies任…

DotnetCharting控件的破解方法

在.net使用DotNetCharting控件生成报表统计图总结 文章中&#xff0c;不少博友提出“1.生成的图片带超链接导向官网,如何处理呀&#xff1f;2.我使用这个控件后&#xff0c;图形可以显示出来。但是发现一个小问题。就是在图形的左上方和图形的下面都隐含了超链接&#xff0c;鼠…

Android开发利器之ActivityTracker

版权声明&#xff1a;本文为xing_star原创文章&#xff0c;转载请注明出处&#xff01; 本文同步自http://javaexception.com/archives/113 Android开发利器之ActivityTracker 今天在群里面划水&#xff0c;有个小伙伴问到一个问题&#xff0c;”刚进公司 清单文件的activity 较…