layUI 日期组件单独使用 并且放大
程序员文章站
2022-04-15 12:40:09
...
日期类型 选择
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>
推荐阅读