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>

layUI 日期组件单独使用并且放大相关推荐

layui之laydate日期组件在done中重新渲染
layui日期组件问题 layui组件在完成渲染赋值,在渲染时赋值均无问题, 最近遇到在done回调时发现赋值失败,参考其他人的写法特别复杂,我的这个写法简单且实用思路:给我的input换个身体 h ...
layui select 赋值_layui给下拉框及日期组件赋值
一.吐槽,layui感觉真的是比较不好用二.为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿, 可能一个功能的开发我用其vue框架很简便就实现了,但 ...
Layui日期选择器+两个日期之间天数计算
Layui日期选择器+天数计算下面这个图片就是我们Layui双控组件的日期范围选择器,可以选择起始时间和终止时间,那么针对于这个组件我们该怎么获取它的具体天数呢? 首先:我的需求是是要年-月-日的格 ...
基于Django+Layui的组件化基础开发平台
项目介绍一款 Python 语言基于Django.Layui.MySQL等框架精心打造的一款模块化.高性能.企业级的敏捷开发框架,本着简化开发.提升开发效率的初衷触发,框架自研了一套个性化的组件,实 ...
layui 日期重置_layui前段框架日期控件使用方法详解
本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下日期目前Layui中的日期组件还是layDate 1.1的改良版,它后续将会进行一次重写. 顺便列举几个常用例子范围选 ...
【前端】layui日期控件点击一闪而过解决方法
[前端]layui日期控件点击一闪而过解决方法参考文章: (1)[前端]layui日期控件点击一闪而过解决方法 (2)https://www.cnblogs.com/nb123/p/12159683 ...
layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
详解Vue.js和layui日期控件冲突问题解决办法发布于 2020-8-10| 复制链接摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...
php 今天明天后天显示10天,【微信小程序】实现含有今天，明天，后天的日期组件...
封面图.JPG 前言做过微信小程序的前端er都知道,小程序有个日期组件,叫picker,但是,需求方要求日期和时间都要显示的,用picker组件的话,那就用到两个picker,date和time,就 ...
layui 日期格式不正确（date、datetime）区别
layui 日期格式不正确(date.datetime)区别问题截图:如下文代码二代码示下: <div class="layui-form-item"><la ...

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

layUI 日期组件单独使用并且放大相关推荐

最新文章

热门文章

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

layUI 日期组件单独使用 并且放大相关推荐

最新文章

热门文章

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

layUI 日期组件单独使用并且放大相关推荐