Как разместить дату над месяцем?

Question

[I_want_to_know]

Есть такая разметка:

<div class="new-front-cart__span">
		<span class="new-date__number">13</span>
		<span class="new-date__month">октября</span>
	</div>

По задумке положение этих двух элементов должно быть друг над другом, типа такого:

12
Июля

Для вывода даты, я использую ACF.
Ввиду того, что css у эелементов разный, задаю разные классы.
Но если в HTML всё понятно, то как мне решить эту задачу (присвоить отдельный класс дате и отдельный класс месяцу) при использовании ACF там ведь просто выбираю дату и всё...

Comments

[Refguser]

Учи каскадирование и наследование css.

[I_want_to_know]

Refguser, Речь не про CSS.
тут именно история про PHP
Нужно получить дату и каким-то образом присвоить класс отдельно для самой даты и отдельно для месяца.
Со стилями порядок полный.

[Refguser]

I_want_to_know, не, ты конечно можешь и в php навертеть (кури маны acf), но в данном случае всё можно решить на уроне css.

[I_want_to_know]

Возможно, я что-то не понимаю, и буду признателен, если дашь дельный совет, как реализовать в css задачу.
История такая:
В ACF создал поле дата и вывожу этим кодом:

<div class="new-front-cart__span"><?php the_field('data_cont_front'); ?></div>

, в админке WP задал дату.
В DevTools по факту выводится эта дата вот таким образом:

<div class="new-front-cart__span">30 сентября</div>

На сколько я понимаю, что бы задать отдельный стиль для числового значения даты и отдельные стили для месяца, нужно к чему то привязаться.
Но в данном случае, привязаться не к чему.
Получается, что в PHP (а возможно js) нужно получить какие то значения и этим значениям задать классы...

[Николай]

I_want_to_know, Попробуйте не сразу выводить получившуюся дату, а взять ее как значение переменной на PHP, и тогда получившуюся строку разделите по пробелам и в разметке уже вставляйте нужные части в нужные теги.

[Артем Золин]

I_want_to_know, в каком формате хранится эта дата в базе данных?

[I_want_to_know]

Артем Золин,
Формат F J
Запись в БД: {s:5:"width";s:0:"";s:5:"class";s:0:"";s:2:"id";s:0:"";}s:14:"display_format";s:3:"F j";s:13:"return_format";s:3:"F j";s:9:"first_day";i:1;}
Верно понимаю, что вы про этот формат?

Answer 1

[kryamk]

<?php
// Получаем значение даты из ACF
$date = get_field('data_cont_front');

// Разделяем дату на число и месяц
$date_parts = explode(' ', $date);
$day = $date_parts[0];  // Число
$month = $date_parts[1];  // Месяц

// Выводим с нужной разметкой
?>
<div class="new-front-cart__span">
    <span class="new-date__number"><?php echo $day; ?></span>
    <span class="new-date__month"><?php echo $month; ?></span>
</div>

Answer 2

[I_want_to_know]

Как я решил задачу:

$date_front= get_field('data_cont_front');
// Разделяем строку на части
$date_parts = explode(' ', $date_front);

// Проверяем, что у нас есть две части: месяц и число
if (count($date_parts) === 2) {
    $number = $date_parts[0]; // Число
		$month = $date_parts[1]; // Название месяца
    
    // Формируем итоговый HTML с классами
    $formatted_date = '<span class="new-date__number">' . htmlspecialchars($number) . '</span> ' .
                      '<span class="new-date__month">' . htmlspecialchars($month) . '</span>';
    
} else {
    echo "Неверный формат даты.";
}

echo $formatted_date; // Вывод результата

Всем спасибо за помощь!