kalendae实现日历式日期多选选择器效果代码-html代码-BFW代码库

kalendae实现日历式日期多选选择器效果代码

代码语言：html

所属分类：选择器

代码描述：kalendae实现日历式日期多选选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/kalendae.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kalendae.standalone.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <style>
        #date-demo2 .kalendae {
        				width: 500px;
        				height: 440px;
        			}
    </style>
</head>

<body>
    <div id="date-demo2">
        <input type="text" id="date-value" />
    </div>
    <div id="date-box">
        <input id="date-demo" style="width: 100%;" />
    </div>


<script type="text/javascript">
    mlgConfig.startDate = new Date('2022-5-1');
    		var planDate = '202210';
    		let kalendae2 = new Kalendae(document.getElementById("date-demo2"), {
    			months: 1,
    			mode: 'multiple',
    			format: 'YYYY-MM-DD',
    			whetherClearBtn: true,//是否有清除按钮
    			viewStartDate: planDate.substr(0, 4) + '-' + planDate.substr(4, 2) + '-' + '01',
    			titleYearFormat: 'YYYY年',
    			direction: 'today-future',
    			subscribe: {
    				'change': function(date) {
    					//					console.log(date, this.getSelected());
    					//				
    					let dateArr = date._i.split('-');
    					planDate = dateArr[0]+dateArr[1];
    					let array = this.getSelectedAsText('D');
    					$('#date-value').val(arrAsStr(array));
    					return true;
    				},
    				//				'date-clicked':function(m){
    				//					console.log(this.settings);
    				//				}
    			}
    		});
    //		mlgConfig.startDate = '2022-2-1';
    		let kalendate = new Kalendae.Input(document.getElementById("date-demo"), {
    			mode: 'multiple',
    			useYearNav: false,
    			format: 'D',
    			weekStart:1,
    			columnHeaderFormat:'ddd',
    			whetherClearBtn: true,
    			fatherId: 'date-box',
    			directionScrolling: false,
    			titleMonthFormat: '请选择天数',
    			titleYearFormat: ' ',
    			selected: [],
    			subscribe: {
    				"view-changed": function() {
    					return false;//返回false阻止切换月份
    				}
    			}
    		});
    
    		//卡片的双击事件  作用:先选择1号，再双击27号，1到27号全部选中
    		$("body").on("dblclick", "#date-demo2 span[class*='k-day-week']", function() {
    			let isSelected = $(this).hasClass('k-selected');
    			let currentSelected = kalendae2.getSelectedAsText('D');
    			let dbDay = $(this).text();
    			let year = planDate.substr(0, 4);
    			let month = planDate.substr(4, 2);
    
    			if(isSelected) {
    				let startIndex = currentSelected.indexOf(dbDay);
    				let resultArr = [dbDay];
    				let tem = parseInt(dbDay);
    				for(let i = startIndex - 1; i >= 0; i--) {
    					let ele = parseInt(currentSelected[i]);
    					if(tem - ele == 1) .........完整代码请登录后点击上方下载按钮下载查看