layUI 日期组件单独使用 并且放大

日期类型  选择

layuI  的date 类型单独使用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body><script src="/js/jquery.min.js"></script>
<script src="/layui/layui.js"></script><div class="site-demo-laydate"  style="margin-top:200px; margin-left:700px"  ><div class="layui-inline" id="test-n1"  ></div>
</div>
<script>layui.use('laydate', function(){var laydate = layui.laydate;//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',btns: []//button不显示,showBottom:false//底部不显示, ready: function (date) {//控件在打开时触发，回调返回一个参数//console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}//$("#layui-laydate1").css("transform: scale(2);");//alert($("#layui-laydate1"));//$("#layui-laydate1").css("background-color: '#EEE'");$("#layui-laydate1").css("transform","scale(2)");//时间控件放大changeColor ();}, change: function (value, date, endDate) {//日期时间被切换后的回调
//                console.log("change");
//                $("#test1").text(value+"000");
//                console.log(value); //得到日期生成的值，如：2017-08-18
//                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
//                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。changeColor ();}, done: function (value, date, endDate) {//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。//console.log("done");console.log(value); //得到日期生成的值，如：2017-08-18//console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}//console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。//$("#test1").text(value+"你好!");//                $("#layui-laydate1").css("transform: scale(2);");changeColor ();}});
//       style="transform: scale(2);"     style="margin-top:200px; margin-left:200px"});function changeColor (){//alert('ddd');//$("#layui-laydate1").css("transform","scale(2)");//debugger;$('tbody tr').each(function(i){                   // 遍历 tr$(this).children('td').each(function(j){  // 遍历 tr 的各个 td//alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。年月日为："+$(this).attr("lay-ymd"));var name =  $(this).attr("lay-ymd");$(this).attr('id',name);$(this).css("background","#FFFFFFFF");});});var dayTimeList =["2019-2-7","2019-2-8","2019-2-9","2019-2-18","2019-2-19","2019-2-20","2019-4-7","2019-4-8"];for(var i = 0 ; i< dayTimeList.length;i++){$("#"+dayTimeList[i]).css("background","#3BA7FF");}
//        $("#2019-2-9").css("background","#3BA7FF");
//        $("#2019-2-8").css("background","#3BA7FF");
//        $("#2019-2-7").css("background","#3BA7FF");}</script>
</body>
</html>

***************************************************************************************

 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body><script src="/js/jquery.min.js"></script>
<script src="/layui/layui.js"></script><div class="site-demo-laydate"  style="margin-top:200px; margin-left:700px"  ><div class="layui-inline" id="test-n1"  ></div>
</div>
<script>layui.use('laydate', function(){var laydate = layui.laydate;//直接嵌套显示laydate.render({elem: '#test-n1',position: 'static',btns: []//button不显示,showBottom:false//底部不显示, ready: function (date) {//控件在打开时触发，回调返回一个参数//console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}$("#layui-laydate1").css("transform","scale(2)");//时间控件放大changeColor ();}, change: function (value, date, endDate) {//日期时间被切换后的回调
//                console.log(value); //得到日期生成的值，如：2017-08-18
//                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
//                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。changeColor ();}, done: function (value, date, endDate) {//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。console.log(value); //得到日期生成的值，如：2017-08-18//console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}//console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。changeColor ();}});
//       style="transform: scale(2);"     style="margin-top:200px; margin-left:200px"});function changeColor (){//debugger;$('tbody tr').each(function(i){                   // 遍历 tr$(this).children('td').each(function(j){  // 遍历 tr 的各个 td//alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。年月日为："+$(this).attr("lay-ymd"));var name =  $(this).attr("lay-ymd");$(this).attr('id',name);$(this).css("background","#FFFFFFFF");});});//需要提示显示的日期   可以选择的日期var dayTimeList =["2019-2-7","2019-2-8","2019-2-9","2019-2-18","2019-2-19","2019-2-20","2019-4-7","2019-4-8"];for(var i = 0 ; i< dayTimeList.length;i++){$("#"+dayTimeList[i]).css("background","#3BA7FF");}
//        $("#2019-2-9").css("background","#3BA7FF");
//        $("#2019-2-8").css("background","#3BA7FF");
//        $("#2019-2-7").css("background","#3BA7FF");}</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

相关文章

Opserver开源的服务器监控系统(ASP.NET)

Opserver开源的服务器监控系统(ASP.NET)

Opserver是Stack Exchange下的一个开源监控系统,系统本身由C#语言开发的ASP.NET&#xff08;MVC&#xff09;应用程序&#xff0c;无需任何复杂的应用配置&#xff0c;入门很快。下载地址&#xff1a;https://github.com/opserver/Opserver。据说&#xff0c;国内腾讯公司内部也…
阅读更多...
jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结

jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结

转载自 jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结为什么使用该功能&#xff1f;项目中的每个页面都包含产品名称、Logo、版本等信息&#xff0c;我希望修改一处&#xff0c;其它所有的全部跟着变。 有同学会说那就都引用一个页面“”就Ok了&#xff1b;但是…
阅读更多...
c 管理信息系统mysql,输入数据并输出信息的系统都称为（)。A、信息系统B、数据库系统C、事务处理系统D、管理信息系统...

c 管理信息系统mysql,输入数据并输出信息的系统都称为（)。A、信息系统B、数据库系统C、事务处理系统D、管理信息系统...

关于葡萄糖重吸收的叙述&#xff0c;错误的是()。A.只有近球小管可以重吸收B.与Na&#xff0b;的重吸收相耦联C.是一种主肌力评定时错误的做法是A、应使患者配合B、患者应适当去除衣物C、应检查涉及的所有关节D、应增加协同当使用竹笆脚手板时&#xff0c;纵向水平杆与横向水平…
阅读更多...
一位跨平台开发者的自白

一位跨平台开发者的自白

Andreia Gaita[1] 在 OSCON 开源大会上发表了一个题为跨平台开发者的自白[2]的演讲。她长期从事于开源工作&#xff0c;并且为Mono[3] 工程&#xff08;LCTT 译注&#xff1a;一个致力于开创 .NET 在 Linux 上使用的开源工程&#xff09;做着贡献&#xff0c;主要以 C#/C 开发。…
阅读更多...
JS (intermediate value).Format is not a function问题解决

JS (intermediate value).Format is not a function问题解决

JS (intermediate value).Format is not a function问题解决 前言 最近项目遇到一个问题&#xff0c;就是在javascript中使用new Date().Format("YYYY-mm-dd")的时候&#xff0c;会出现报错现象&#xff0c;直接导致界面无法正常显示。下面为大家解答一下。 问题详情…
阅读更多...
java程序大笨钟怎么打,L1-018.大笨鍾（Java）PAT團體程序設計天梯賽-練習集

java程序大笨钟怎么打,L1-018.大笨鍾（Java）PAT團體程序設計天梯賽-練習集

微博上有個自稱“大笨鍾V”的家伙&#xff0c;每天敲鍾催促碼農們愛惜身體早點睡覺。不過由於笨鍾自己作息也不是很規律&#xff0c;所以敲鍾並不定時。一般敲鍾的點數是根據敲鍾時間而定的&#xff0c;如果正好在某個整點敲&#xff0c;那么“當”數就等於那個整點數&#xff…
阅读更多...
JSP JavaBean

JSP JavaBean

转载自 JSP JavaBeanJSP JavaBean JavaBean是特殊的Java类&#xff0c;使用J ava语言书写&#xff0c;并且遵守JavaBean API规范。 接下来给出的是JavaBean与其它Java类相比而言独一无二的特征&#xff1a; 提供一个默认的无参构造函数。需要被序列化并且实现了Serializable接…
阅读更多...
layui 单独使用日期组件

layui 单独使用日期组件

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>layDate快速使用</title><link rel"stylesheet" href"/layui/css/layui.css" media"all"><style type"text/css"…
阅读更多...
JSP中的EL表达式详细介绍

JSP中的EL表达式详细介绍

转载自 JSP中的EL表达式详细介绍一、JSP EL语言定义EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能。脚本编制元素是指页面中能够用于在 JSP 文件中嵌入 Java 代码的元素。它们通常用于对象操作以及执行那些影响所生成内容的计算。JSP 2.0 将 EL 表达式添加为一种…
阅读更多...
php如何直接使用iview,iview安装使用

php如何直接使用iview,iview安装使用

iView 是一套基于 Vue.js 的开源 UI 组件库&#xff0c;主要服务于 PC 界面的中后台产品。安装cd 项目cnpm install iview -S在项目中引入iview 在入口文件main.js中配置import iView from iviewimport iview/dist/styles/iview.cssVue.use(iView)官网示例{{ message }}export …
阅读更多...
想获得腾讯发行机会？来“腾讯GAD•游戏创新大赛”

想获得腾讯发行机会？来“腾讯GAD•游戏创新大赛”

世界上最快乐的事&#xff0c;莫过于为理想而奋斗。正是源于心中对游戏的情怀和梦想&#xff0c;无数游戏人走上了游戏开发的道路。这条路&#xff0c;或迷茫、或坚定、或痛苦、或喜悦&#xff0c;但只要拥有理想与热情&#xff0c;便是航行的舵和帆。 腾讯GAD游戏开发者平台&a…
阅读更多...
oxyen eclipse 启动 报错 se启动提示javaw.exe in your current PATH、No java virtual machine

oxyen eclipse 启动 报错 se启动提示javaw.exe in your current PATH、No java virtual machine

eclipse启动提示javaw.exe in your current PATH、No java virtual machine 另外&#xff0c;也可修改eclipse.ini 文件&#xff0c;在最前面加上下面两行内容&#xff1a; -vm D:/java/jdk1.6.0_10/bin/javaw.exe *******************************************************…
阅读更多...
JSTL常用标签6

JSTL常用标签6

转载自 JSTL常用标签6JSTL常用标签&#xff1a; 1、EL表达式可以取出Java Bean以及单个属性的值&#xff0c;在页面中使用${..},但是不能遍历集合。 使用JSTL可以遍历集合&#xff0c;因此使用EL和JSTL配合使用&#xff0c;基本上可以实现所有的功能。 2、在使用标签的页面中&…
阅读更多...
matlab eval 不显示,matlab中 eval(command); 运算符无效的问题

matlab eval 不显示,matlab中 eval(command); 运算符无效的问题

下面这个程序是haar-like特征提取-->haar-like关键点显示-->haar-like特征人脸检测代码&#xff0c;该段代码在运行时出现了如图片所示的bug&#xff0c;本人看不懂这个bug出错的根源&#xff1a;(各行代码已有注释&#xff0c;出错的那一行代码已经用黄色底纹标出&#…
阅读更多...
.NET跨平台之旅：将QPS 100左右的ASP.NET Core站点部署到Linux服务器上

.NET跨平台之旅：将QPS 100左右的ASP.NET Core站点部署到Linux服务器上

天下午我们将生产环境中一个单台服务器 QPS&#xff08;每秒请求数&#xff09;在100左右的 ASP.NET Core 站点部署到了 Linux 服务器上&#xff0c;这是我们解决了在 .NET Core 上使用 EnyimMemcached&#xff08;memcached客户端&#xff09;的问题之后&#xff0c;.NET 跨平…
阅读更多...
百世

百世

https://blog.csdn.net/lsh_2013/article/details/45507619 https://blog.csdn.net/lsh_2013/article/details/45507619 https://blog.csdn.net/snowwhite211/article/details/49450613?locationNum8&fps1
阅读更多...
matlab哈明窗带阻,基于matlabFIR低通,高通,带通,带阻滤波器设计.doc

matlab哈明窗带阻,基于matlabFIR低通,高通,带通,带阻滤波器设计.doc

基于matlabFIR低通,高通,带通,带阻滤波器设计课 程 设 计 报 告课程名称&#xff1a; DSP设计名称&#xff1a;FIR 低通、高通带通和带阻数字滤波器的设计姓 名&#xff1a;学 号:班 级&#xff1a;指导教师&#xff1a;起止日期&#xff1a;课 程 设 计 任 务 书学生班级&…
阅读更多...
JSTL 标签大全详解

JSTL 标签大全详解

转载自 JSTL 标签大全详解一、JSTL标签介绍 1、什么是JSTL&#xff1f;JSTL是apache对EL表达式的扩展&#xff08;也就是说JSTL依赖EL&#xff09;&#xff0c;JSTL是标签语言&#xff01;JSTL标签使用以来非常方便&#xff0c;它与JSP动作标签一样&#xff0c;只不过它不是J…
阅读更多...
C# 在腾讯的发展

C# 在腾讯的发展

.NET 主要的开发语言是 C# ,.NET 平台泛指遵循ECMA 334 C#和 ECMA 335 CLI 标准的开发平台&#xff0c;包括微软自行开发的.NET 平台和开源实现的Mono 以及微软最新开发的.NET Core。从2007年加入公司自今一直在使用C#, 对这门语言在腾讯的使用情况有大概的了解&#xff0c;最近…
阅读更多...
sam+matlab,Sam版Matlab粒子群PSO工具已经更新

sam+matlab,Sam版Matlab粒子群PSO工具已经更新

显著亮点这次最大的更新是支持除了bound上下边界约束之外的其它类型的线性和非线性约束条件。名字也从Another Particle Swarm Toolbox改为Constrained Particle Swarm Optimization英文版介绍DescriptionPreviously titled “Another Particle Swarm Toolbox”IntroductionPar…
阅读更多...
最新文章

Copyright @ 2022~2023