jQuery datepicker 样式天宽和添加多个元素答案

【问题标题】：jQuery datepicker style days width and add multiple elementsjQuery datepicker 样式天宽和添加多个元素
【发布时间】：2018-05-02 04:09:10
【问题描述】：

我想：

在特定日期设置 CSS 宽度（例如，像里面的电源条）
在特定日期内添加多个元素

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

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/

【问题讨论】：

你能再解释一下吗
我刚刚看到您可以为特定日期设置颜色。您想为这一天应用宽度吗？
@TanDuong 是的，但无法弄清楚如何.. Gerardo 我有一个来自 js 的值，并希望以某种方式在当天显示：我正在考虑 CSS 伪选择器、attr() 等，但是看起来不简单
我怕你做不到，因为这是一张桌子。
在这里查看更多stackoverflow.com/a/12567972/5474196

标签： javascript jquery css datepicker jquery-ui-datepicker

【解决方案1】：

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

查看这个修改过的fiddle

在一天内添加多个元素

更改的代码 - 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;
}

【讨论】：