时间控件多选，选择不连续的、多个日期

最新推荐文章于 2024-10-11 14:26:33 发布

暴走的小米渣

最新推荐文章于 2024-10-11 14:26:33 发布

阅读量7.5k

点赞数 2

文章标签：前端框架

本文链接：https://blog.csdn.net/qq_39233290/article/details/103107227

版权

功能需求：，客户想选择不连续的、多个日期的数据进行比对。
之前做的基本上选择一天时间或者一个时间范围，那么只需要引入一个或两个时间选择器就可以完成了。要选择多个并且不连续的第一次做（来自在学校练习代码时长两年半的Java实习生，我会写BUG，调BUG，music！！！）。
网上找了一会儿没找到现成的，好的，只有自己实现一个了。
第一个方式，对时间控件选中的日期进行标记。最后获取到标记的日期。（想法很完美，现实很残酷，因为技术太菜，获取的时间总是n-1什么意思呢？选择了4天只能获取到前面3天）没实现就不展示了。
第二个方式，选择了一天就将其添加进input框里面，并为这个值设置可以删除的功能，最后获取input框里面的所有值。
在这里插入图片描述
点击x可以删除不想要的日期
代码`

日期

	                                </div>
	                                <input type="hidden" name="startDate">
	                                <input type="hidden" name="startDates" id="timeList">
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            
	</div>
</body>
<script>
	var timeList = [];
layui.use(['jquery','laydate'], function(){
  var laydate = layui.laydate;
  var $ = layui.jquery ;//重点处
  //执行一个laydate实例
 laydate.render({ 
             elem: '#starttime'
             ,type: 'date'
             ,done: function(value, date, endDate){
                 
						if(timeList.indexOf(value) > -1){
							alert("Element already exist");
							document.getElementById("starttime").text = "";
						}else{
							timeList.push(value);
							$("#timeList").val(timeList.join(','))
							var str = '<span class=" layui-btn-xs layui-btn layui-btn-normal" value="'+value+'">'+value+'<i class="layui-icon layui-icon-close"></i></span>';   
							$("#starttime").after(str);
							document.getElementById("starttime").text = "";
						}
             }
         });
		 
		 $(document).on('click','.layui-icon-close',function(){
			 
		             $(this).parent().remove();
		             var value = $(this).parent().attr('value');
		             if(value != '' && timeList.indexOf(value) > -1){
		                 timeList.remove(value)
		             }
		             $("#timeList").val(timeList.join(','))
		         })
});
Array.prototype.remove = function(n){
    var  l = this.length;
    var _l = 0 //要删除值的个数
    for(var i =0;i < l;i ++){    
        if(this[i] == n){
            var k = i;
            while(k < l){
                this[k] = this[++k];
                i--;//防止后一项的值也为n而未被删除
            }
            _l++;
        }        
    }
    this.length -=_l;
    return this;//实现链式调用
}

Array.prototype.addEle = function(n){
    var  l = this.length;
    var _l = 0 //要删除值的个数
    for(var i =0;i < l;i ++){    
        if(this[i] == n){
            var k = i;
            while(k < l){
                this[k] = this[++k];
                i--;//防止后一项的值也为n而未被删除
            }
            _l++;
        }        
    }
    this.length -=_l;
    return this;//实现链式调用
}
</script>

第三种方式，做一个树的下拉列表可以设置多选，ztree、easyui的datalist，这里我选用的是easyui的可以多选的datalist
在这里插入图片描述

点击月份折叠或展开，点击选中颜色变成其它颜色，再次点击则变回初始色表示为选中，最后调用方法getSelections();获得选中的日期信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Multiple Selection DataList - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
		<script type="text/javascript" src="../../jquery.min.js"></script>
		<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
		<style>
			.datagrid-row-selected {
				background-color: #cce6ff;
			}
		</style>
	</head>
	<body>
		<div style="margin:20px 0"></div>
		<div id="datalist" class="easyui-datalist" title="时间列表" style="width:200px;height:500px">
		</div>
		<div onclick="getSelectDates()">点击</div>
		<script src="../../../datalist-date.js"></script>
		<script type="text/javascript">
			var groupdata = getDateDataList();
			$(function() {
				$('#datalist').datalist({
					data: groupdata,
					method: 'get',
					singleSelect: false,
					groupField: 'group',
					onSelect: function(data) {
						var color = $(this).css("background-color");
						if (color == 'rgb(221, 221, 221)') {
							$(this).css("background-color", "rgb(140, 188, 194)");
						} else if (color == 'rgb(140, 188, 194)') {
							$(this).css("background-color", "rgb(221, 221, 221)");
						}

					},
					onLoadSuccess: function(data) {
						$('.datagrid-btable').css('display', 'none');
						$($('.datagrid-btable')[0]).css('display', 'table');
					}
				});

			})
		</script>
	</body>
</html>

			$(document).on('click', '.datagrid-group', function(e) {
				var display = $(this).next().css('display');
				if (display == 'none') {
					$(this).next().css('display', 'table');
				} else if (display == 'block' || display == 'table') {
					$(this).next().css('display', 'none');
				}
			});

			function getSelectDates() {
				var checkedItems = $('#datalist').datagrid('getSelections');
				return checkedItems;

			}

			function getMonthDays(myMonth) {
				var now = new Date(); //当前日期
				var nowYear = now.getYear(); //当前年
				var monthStartDate = new Date(nowYear, myMonth, 1);
				var monthEndDate = new Date(nowYear, myMonth + 1, 1);
				var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
				return days;
			}

			function getYearOfMonth() {
				var months = [];
				var nowdate = new Date();
				var month = nowdate.getMonth() + 1;
				var year = nowdate.getFullYear();
				var item = '';
				for (var i = 1; i <= month; i++) {
					item = year + "年" + i + "月";
					months.push(item);
				}
				return months;
			}

			function getDateDataList() {
				var datalist = [];
				var groups = [];
				groups = getYearOfMonth();
				var date = new Date();
				var days = 0;
				var m = date.getMonth() + 1;
				for (var i = m; i > 0; i--) {
					if (i == m) {
						days = date.getUTCDate();
					} else {
						days = getMonthDays(i - 1);
					}
					for (var j = 1; j <= days; j++) {
						var obj = new Object();
						obj.group = groups[i - 1];
						obj.text = date.getFullYear() + "-" + (i < 10 ? "0" + i : i) + "-" + (j < 10 ? "0" + j : j);
						datalist.push(obj);
					}

				}
				return datalist;
			}