时间戳

首页 > 解决方案 > jQuery datepicker 样式天宽和添加多个元素

javascript - jQuery datepicker 样式天宽和添加多个元素

问题描述

我想：

这就是我尝试为演示设置样式（硬编码）的方式，但我需要它是动态的：

function specialDate(date){
    if((date.getMonth() == 4) && (date.getDate() == 12)){
        return [true, 'sd special_day_20', "special \n tooltip \n here"];
    }
    if((date.getMonth() == 4) && (date.getDate() == 10)){
        return [true, 'sd special_day_40', "special \n tooltip \n here"];
    }
    if((date.getMonth() == 4) && (date.getDate() == 21)){
        return [true, 'sd special_day_90', "special \n tooltip \n here"];
    }
    return [true, ''];
}

$('#datepicker').datepicker();
$('#datepicker').datepicker('option', 'beforeShowDay', specialDate);



// simulate after beforeShowDay event:
setTimeout(function(){
    $('.sd').each(function(){
        var classes = $.map($(this)[0].classList, function(cls, i) {
            if (cls.indexOf('special_day_') === 0) {
                return cls.replace('special_day_', '');
            }
        });
        for(var i=0; i<classes[0] / 10; i++){
            $(this).append('<i></i>');
        }
    });
}, 1000);
td {
    line-height: 5px;
}
td a {
    position: relative;
}
td a:before {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    background: red;
}
td i {
    display: inline-block;
    vertical-align: top;
    margin: 1px;
    width: 4px;
    height: 4px;
    background: #2100ff;
}
.special_day_20 a:before {
    width: 20%;
}
.special_day_40 a:before {
    width: 40%;
}
.special_day_90 a:before {
    width: 90%;
}
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="datepicker"></div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

https://jsfiddle.net/Leykvdvu/5/

标签： javascriptjquerycssdatepickerjquery-ui-datepicker

解决方案

您需要设置锚标签position: absolute;及其父标签position: relative;。

检查这个修改过的小提琴

在一天内添加多个元素

更改的代码 - JS

$(".special_day a").append("<div></div><div></div>");

在特定日期设置 CSS 宽度的样式（例如内部的电源条）

CSS

.special_day a {
    color: red !important;
    position: absolute;
    left:0;
    top:0;
    width:200%;
}
.special_day div {
  display:inline-block;
  width:20px;
  background: green;
  height: 10px;
  margin: 0px 2px;
}
.special_day {
  position: relative;
}

推荐阅读