layUI 日期组件单独使用 并且放大
生活随笔
收集整理的這篇文章主要介紹了
layUI 日期组件单独使用 并且放大
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
日期類型? 選擇
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) {//控件在打開時觸發(fā)，回調(diào)返回一個參數(shù)//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) {//日期時間被切換后的回調(diào) // 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); //得結(jié)束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。changeColor ();}, done: function (value, date, endDate) {//控件選擇完畢后的回調(diào)---點擊日期、清空、現(xiàn)在、確定均會觸發(fā)。//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); //得結(jié)束的日期時間對象，開啟范圍選擇（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) {//控件在打開時觸發(fā)，回調(diào)返回一個參數(shù)//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) {//日期時間被切換后的回調(diào) // console.log(value); //得到日期生成的值，如：2017-08-18 // console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} // console.log(endDate); //得結(jié)束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。changeColor ();}, done: function (value, date, endDate) {//控件選擇完畢后的回調(diào)---點擊日期、清空、現(xiàn)在、確定均會觸發(fā)。console.log(value); //得到日期生成的值，如：2017-08-18//console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}//console.log(endDate); //得結(jié)束的日期時間對象，開啟范圍選擇（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>?
?
?
?
?
?
?
?
?
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的layUI 日期组件单独使用 并且放大的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： s8符文血之滋味(血之符文武器)
- 下一篇： layui 单独使用日期组件