layui 单独使用日期组件

最新推荐文章于 2024-03-26 11:16:41 发布

qq_27327261

最新推荐文章于 2024-03-26 11:16:41 发布

阅读量917

点赞数

分类专栏：博客文章标签：博客

本文链接：https://blog.csdn.net/qq_27327261/article/details/87971070

版权

博客专栏收录该内容

449 篇文章 6 订阅

订阅专栏

<!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">
        table{
            width: 500px !important;
            height: 500px !important;
        }
        .layui-laydate-main{
            width: 550px !important;
            height: 570px !important;
        }
    </style>
</head>
<body>

<script src="/js/jquery.min.js"></script>
<script src="/js/date.format.js"></script>
<script src="/layui/layui.js"></script>

<div class="site-demo-laydate"  style="margin-top:50px; 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(1)");//时间控件放大    这个不好
                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 date =  $(this).attr("lay-ymd");
              var oldTime = (new Date(date)).getTime();
              var curTime = new Date(oldTime).Format("yyyy-MM-dd");
              $(this).attr('id',curTime);
              $(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"];
        var dayTimeList =["2019-02-07","2019-02-08","2019-02-09","2019-02-18","2019-02-19","2019-02-20","2019-04-07","2019-04-08"];
        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>

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

date.format.js

/* eslint no-extend-native: 0 */

(function () {
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
}).call(this)