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

刺骨的言语ヽ痛彻心扉 2022-03-16 09:20 250阅读 0赞

日期类型  选择

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>