1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Меняем вид даты в виде материала

Автор
waak
написать автору
пожаловаться
ID материала № 55
Авторwaak
CMSuCoz
Просмотров 289
Добавлено 27.08.2018
Комментариев 2

Меняем вид даты в виде материала

Всем привет!
Сегодня покажу на примере как же всё таки можно изменить стандартный вид даты которая выводится оператором $DATE$ на свой что бы после можно было им управлять через css

Вариантов много можно придумать всё зависит от того что вам нужно но тут мы рассмотрим самый просто через js

Для начало помешаем оператор в блок с ид и через него меняем структуру вывода даты
пример вида блока
Код
<div class="datawaak" id="datawaak$ID$">$DATE$</div>


А теперь напишем сам скрипт который и будет выводить дату в новой структуре
Код
<script>
   var str = $("#datawaak$ID$").html();
var mas = str.split('.');
var code='';
for (i=0; i<mas.length; i++){
   code+= '<div>'+mas[i]+'</div>';
}
$("#datawaak$ID$").html(code);
</script>

только разделитель в дате должен быть точка то есть дата в материале должна выводится у вас так число.месяц.год
если у вас выводится не так а к примеру / или , то в скрипте вам нужно заменить точку на тот что у вас заменить его нужно в этой строчке

Цитата
var mas = str.split('.');


На выходе получаем такой вид
Код
<div class="datawaak" id="datawaak$ID$"><div>число</div><div>месяц</div><div>год</div></div>

И теперь через стили пишем нужные параметры

пример кода стилей

Код

.datawaak div {
   text-align: center;
}

/*дата*/
   .datawaak div:nth-child(1) {
     font-size: 40px;
     font-weight: bold;
     padding: 10px 0 0;
   }
/*месяц*/
   .datawaak div:nth-child(2) {
     font-size: 24px;
      text-transform: uppercase;
   }
/*год*/
   .datawaak div:nth-child(3) {
     font-size: 16px;
   }


Как вы можете заметить всё очень просто!

Это один из вариантов так же можно присвоить каждому пункту свой класс и работать уже с ним но нам этого не нужно так что нам подойдёт и такой

Возникнут вопросы пишите их в комментариях.
2 10
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
na3uTuB4uk
19.02.2019 в 14:14
А если мне надо, что бы например год не выводился? Например только 28 ниже Января или сокращенно 28 Янв и все. Я так понимаю скрывать через стили только?
0
waak
19.02.2019 в 16:10
Да, просто добавьте к нужному блоку в стилях display: none;
ещё конечно можно исправить скрипт и сделать что бы он добавлял только ту информацию которая вам нужна обрезая лишнее самостоятельно но тогда скрипт будет больше
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация