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. 表名及所有者 在默认约定的情况下…

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可能大小发生…

移动端 flexible.js 布局详解

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

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

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

js css模仿打字效果

1.效果 2.源码 <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><style type"text/css">#myDiv{display: inline-block;width:500px;height:300px;background-color:rgba(0,0,0,0.3);colo…

iframe 高度根据子页面来确定

标题描述一、解决方法解决代码二、关于高度问题简单讲一下jquery中的 height()&#xff0c;innerHeight()、outHeight()&#xff0c;js中的offsetHeight、clientHeight、scrollHeight。如何获取没有给出高度的元素的高度&#xff1f;详细介绍offsetHeight,clientHeight,scrollH…

layui 子页面写弹出框覆盖父页面,以及给弹框中的表单赋值

咋说呢&#xff0c;因为对 layui 不太熟悉&#xff0c;这个弹出框搞了好久&#xff0c;看了好多解决方案&#xff0c;大致尝试了一下其中几种&#xff0c;在坑中无法自拔。。。总之终于搞出来了&#xff0c;在这里分享一下我的笔记。 着急的直接 戳这里 看解决代码。 尝试 1、…

html实现文字垂直居中且设置间隔

使用table和table-call布局 将表格作为一个table表&#xff0c;使用table-cell定义每个单元格的布局为table-cell, 抛出display的有效值 单元格中间的间隔使用 border-spacing:10px; border-collapse: separate;定义单元格vertical-align: middle; display: table-cell;代码源码…

Hibernate隐藏的宝石:pooled-lo优化器

介绍 在这篇文章中&#xff0c;我们将揭示一个序列标识符生成器&#xff0c;​​它结合了标识符分配效率和与其他外部系统的互操作性&#xff08;同时访问底层数据库系统&#xff09;。 传统上&#xff0c;有两种序列标识符策略可供选择。 序列标识符&#xff0c;对于每个新值…

vue inheritAttrs、$attrs和$listeners使用

inheritAttrs、$attrs和$listeners使用场景&#xff1a; 组件传值&#xff0c;尤其是祖孙组件有跨度的传值。 &#xff08;1&#xff09;inheritAttrs 属性说明&#xff1a;https://cn.vuejs.org/v2/api/#inheritAttrs 说明比较晦涩。 组件传值一般是通过props传值的。inhe…

仍不切换到Java 8的6个理由

Java 8很棒。 期。 但是……在我们有机会玩耍并玩弄它之后&#xff0c;就该退出了&#xff0c;避免吃盐。 所有的好东西都是有代价的&#xff0c;在这篇文章中&#xff0c;我将分享Java 8的主要痛点。请确保在升级和放弃7之前您已经意识到了这些痛点。 1.并行流实际上会使您减…

鼠标滚轮切屏效果

某天发现一个网站《北京新鸿儒世纪网络技术有限公司》&#xff0c;一开始打开&#xff0c;哇&#xff0c;好简单啊&#xff0c;特别是首页&#xff0c;就一张图&#xff0c;后来发现里面有挺多小细节的&#xff0c;比如&#xff1a;做了媒体响应式、滚轮切屏&#xff08;第一次…

小程序 自定义组件报错[“usingComponents“][“my-list“] 未找到

根据官网案例写了一个自定义组件&#xff0c;引入时总是报这个错误。 后面在社区里面找到了解决办法&#xff0c;把上面配置中改成&#xff1a;"my-list": "/components/my-list/my-list" 就可以了。 具体原因&#xff1a;官方文档上的自定义组件是 4 个文…

http 请求报文和响应报文

1、请求报文 示例&#xff1a; 2、响应报文 示例&#xff1a; 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

小程序 封装table组件

实在是懒得自己封装了&#xff0c;就在网上找了一下别人封装好的&#xff0c;这里主要参考的是 灰信网上的一篇文章&#xff0c;我在他的基础上改了一下样式&#xff0c;动态生成列表每一列列宽。 表格可左右横向滑动 一、子页面 table.wxml <scroll-view class"ta…

服务器--停止启动服务,查看日志文件

停止启动服务 ./shutdown.sh 停止掉当前服务 ./startup.sh 启动当前服务 例如&#xff1a; Tomcat服务器&#xff1a;在apache-tomcat-7.0.82/bin 目录下&#xff0c;sh shutdown.sh 停止掉当前服务&#xff0c;sh startup.sh 启动当前服务 查看日志文件&#xff1a; Tomcat查看…

linq 解决winForm中控件CheckedListBox操作的问题。(转载)

1.获取CheckedListBox选中项的文本的字符串&#xff0c;并用分隔符连接。系统没有提供相应的属性&#xff0c;方法。 这里我们利用3.0的特性给其来个扩展方法,如下&#xff1a; public static stringGetCheckedItemsText(thisCheckedListBox box) { stringre…