Ширина дней в стиле jQuery datepicker и добавление нескольких элементов

Я хотел бы:

стилизуйте ширину 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/

Вы можете объяснить немного подробнее

— 02.05.2018 06:13

Я только что видел, как вы можете установить цвет для вашего конкретного дня. Хотите применить ширину на этот день?

— 02.05.2018 06:14

@TanDuong да, но не могу понять, как ... Gerardo У меня есть значение, поступающее из js, и я хочу каким-то образом отображать день: я думал о псевдоселекторах CSS, attr () и т. д., Но выглядит непросто

— 02.05.2018 06:15

Боюсь, что у вас не получится, потому что это таблица.

— 02.05.2018 06:20

Подробнее здесь stackoverflow.com/a/12567972/5474196

— 02.05.2018 06:26

javascript jquery css datepicker jquery-ui-datepicker

02.05.2018 06:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вам нужно установить тег привязки position: absolute; и его родительский position: relative;.

Отметьте этот измененный рабочий пример

add multiple elements inside the day

Измененный код - JS

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

style the CSS width on specific days (e.g. like a power bar inside)

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;
}

02.05.2018 06:23

Другие вопросы по теме

Хотите получить номер страницы с помощью функции Datatable jQuery, но она генерирует Typeerror

Элемент HTML Absolute onclick возвращается в начало страницы

Вызов Ajax $ _POST для PHP $ _SESSION возвращает устаревшую информацию

Показать div при наведении курсора на изображение JQuery

Динамическое добавление / создание Selectpicker при нажатии кнопки

Уведомление по времени jQuery onclick

Document.getElementByClassName не работает, но document.getElementById работает

Проблема форматирования раскрывающегося списка JQuery Mobile

Произвести случайное изменение цвета границы "DIV" в jquery из цикла PHP while

Как создать форму только со скрытыми входами внутри модальной отправки Bootstrap (4) при входе?

Ширина дней в стиле jQuery datepicker и добавление нескольких элементов

Ответы 1

Другие вопросы по теме

Похожие вопросы