JQuery DatePicker стиль дней ширину и добавить несколько элементов - PullRequest
Новая
       11

JQuery DatePicker стиль дней ширину и добавить несколько элементов

0 голосов
/ 02 мая 2018

Я бы хотел:

  • стиль ширины 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/

1 Ответ

0 голосов
/ 02 мая 2018

Вам необходимо установить тег привязки 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;
}
...