Layui日期多选，laydate多选

最新推荐文章于 2024-04-12 15:19:33 发布

慕云枫

最新推荐文章于 2024-04-12 15:19:33 发布

阅读量4.6k

点赞数 2

分类专栏： layui 前端文章标签： layui js html javascript

本文链接：https://blog.csdn.net/weixin_43992507/article/details/114398887

版权

前端同时被 2 个专栏收录

94 篇文章 2 订阅

订阅专栏

layui

30 篇文章 4 订阅

订阅专栏

效果如下
在这里插入图片描述
实现方式
建议使用2.3.x及以上版本的layui
复制下面代码，引入layui的css和js即可使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layui日期多选</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .laydate-day-mark {
            background-color: #5FB878;
            color: white;
        }
        .laydate-day-mark::after {
            background-color: #5FB878;
        }
		</style>
</head>
<body style="padding: 20px;">
		<div class="layui-inline" id="test-date"></div>
		<button class="layui-btn" style="margin-top:10px;margin-left:10px;" onclick="getAllDate()">获取日期</button>
		<div id="date_all"></div>
</body>
		<script src="layui/layui.js"></script>
		<script>
			var data = {};
			var layer, $, laydate;
			layui.use(['layer', 'form', 'jquery', 'laydate'], function () {
				layer = layui.layer;
				$ = layui.jquery;
				laydate = layui.laydate;
	        	var new_date = new Date();
	        	loding_date(new_date, data);
	    	})
			//日历插件调用方法
			function loding_date(date_value, data) {
			    laydate.render({
			        elem: '#test-date'
			        , type: 'date'
			        , theme: 'grid'
			        , position: 'static'
			        , range: false
			        , value: date_value
			        , isInitValue: false // 2.3.0新增
			        , calendar: false
			        , btns: false
			        , ready: function (value) {
			            hide_this(value);
			        }
			        , done: function (value, date, endDate) {
			            add_new(value, data)
			        }
			        , change: function (value, date) {
			            hide_this(date);
			        }
			        , mark: data // 选中的所有日期赋值, 默认赋值格式为json 如：{'2021-03-03':''}
			    });
			}
			function hide_this(value) {
			    var mm = value.year + '-' + value.month + '-' + value.date;
			    $('.laydate-theme-grid table tbody').find('[lay-ymd="' + mm + '"]').removeClass('layui-this');
			}
			//定义添加/编辑标注方法
			function add_new(obj_date, markJson) {
			    $('#test-date').html(''); // 先清除原先表格信息
			    if (markJson.hasOwnProperty(obj_date)) {
			        delete markJson[obj_date]; // 删除取消日期
			    } else {
			        // 新增选择日期
			        markJson[obj_date] = ''
			    }
			    loding_date(obj_date, markJson);// 重新创建个新的日期表格
			}
			function getAllDate(){
			    var dates = "";
			    for(var key in data){
			  		if(dates == ""){
				    	dates = key;
			 		}else{
			  			dates += ","+key;
					}
			    }
			    $("#date_all").text(dates);
			}
		</script> 
</html>

慕云枫

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
Layui日期多选，laydate多选

效果如下实现方式建议使用2.3.x及以上版本的layui复制下面代码，引入layui的css和js即可使用<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layu
复制链接

扫一扫