标签选择单选（可取消）

效果

需要引入：
        jquery-3.2.1.min.js    
        bootstrap.min.css    （提供布局）
        aui.2.0.css（标签样式）

html部分

<div class="panel panel-default">
    <div class="panel-heading">日期</div>
	    <div class="panel-body">
		<ul class="aui-list aui-form-list">
			<li class="aui-list-item" id="dateDiv">
				<section class="aui-content-padded" id='selectDate'></section>
			</li>
		</ul>
	</div>
</div>

js代码

var dateArr = ['2018-12-13','2018-12-14','2018-12-15','2018-12-16','2018-12-17','2018-12-18','2018-12-19'];//日期数组
var dateRest = [];//日期结果接收
var selectDate = "selectDate";//日期id
showDate(selectDate,dateArr,dateRest);

//判断数组是否包含某元素    是：true  否：false
function isInArray(arr,value){
    for(var i = 0; i < arr.length; i++){
        if(value === arr[i]){
            return true;
        }
    }
    return false;
}
function showDate(selectType,option,newoption){
	$(selectType).innerHTML="";
	function $(id){ return document.getElementById(id)};
	for(var i = 0;i < option.length;i++){
		$(selectType).innerHTML+="<div id='"+selectType+i+"' class='aui-label'  style='font-size: 16px;margin: 0px 15px 6px 5px;cursor:pointer'>"+option[i]+"</div>";
	}
	for(var j=0;j<option.length;j++){
		(function(j){
			$(selectType+j).onclick=function(){
				for(var k=0;k<option.length;k++){
					$(selectType+k).className = "aui-label";//styleclass为新的属性值
					$(selectType+k).setAttribute("class","aui-label");
				}
				
				if(isInArray(newoption,option[j])){
					for(var r in newoption){
				   		if(newoption[r] === option[j]){
				   			$(selectType+j).className = "aui-label";//styleclass为新的属性值
							$(selectType+j).setAttribute("class","aui-label");
							newoption.splice(r,1);
				   		}
				   	}
				}else{
					$(selectType+j).className = "aui-label aui-label-warning";//styleclass为新的属性值
					$(selectType+j).setAttribute("class","aui-label aui-label-warning");
					newoption.push(option[j]);
					if(newoption.length > 1){
						newoption.splice(0,1);
					}
				}
			 }
		})(j);
	}
}