форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
27-08-2018 в 22:52 370

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


Меняем вид даты в виде материала
Всем привет!
Сегодня покажу на примере как же всё таки можно изменить стандартный вид даты которая выводится оператором $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;
   }


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

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

Возникнут вопросы пишите их в комментариях.

11

Комментарии

na3uTuB4uk 19-02-2019 в 14:14
А если мне надо, что бы например год не выводился? Например только 28 ниже Января или сокращенно 28 Янв и все. Я так понимаю скрывать через стили только?
waak 19-02-2019 в 16:10
Да, просто добавьте к нужному блоку в стилях display: none;
ещё конечно можно исправить скрипт и сделать что бы он добавлял только ту информацию которая вам нужна обрезая лишнее самостоятельно но тогда скрипт будет больше
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru