Theming of Date Fields with CSS
Last updated on
30 April 2025
Hello, I spent a lot of time searching for a way to control the look and feel of a date field and its variables through CSS and didn't find any great solutions but was able to get my desired results through combining a variety of different posts. If there is a better way to do it, that feedback would be greatly appreciated.
Here is how I was able to create a custom look and feel for the different variables pulled from my date field "field_event_date" :
<?php
// Start Date - Since the cck date field is not in UNIX timestamp format, convert first
$timestamp = strtotime($field_event_date[0]['value']);
$month = format_date($timestamp, 'custom', 'M');
$day = format_date($timestamp, 'custom', 'd');
$year = format_date($timestamp, 'custom', 'Y');
$hour = format_date($timestamp, 'custom', 'g');
$min = format_date($timestamp, 'custom', 'i');
$ampm = format_date($timestamp, 'custom', 'a');
?>
<?php
// End Date - Since the cck date field is not in UNIX timestamp format, convert first
$timestamp = strtotime($field_event_date[0]['value2']);
$month2 = format_date($timestamp, 'custom', 'M');
$day2 = format_date($timestamp, 'custom', 'd');
$year2 = format_date($timestamp, 'custom', 'Y');
$hour2 = format_date($timestamp, 'custom', 'g');
$min2 = format_date($timestamp, 'custom', 'i');
$ampm2 = format_date($timestamp, 'custom', 'a');
?>
<p><div class="eventDate">
<div class="event-calbox"><span class="event-month"><?php print $month; ?></span>
<span class="event-day"><?php print $day; ?></span><br>
<span class="event-year"><?php print $year; ?></span></div>
</div>
</p>
<div class="eventDate2">
<div class="event-calbox"><span class="event-month"><?php print $month2; ?></span>
<span class="event-day"><?php print $day2; ?></span><br>
<span class="event-year"><?php print $year2; ?></span></div>
</div>
</p>I am sure there is a lot of room for improvement of this code but it seems to be working for my needs so far. Hope it helps others...
Help improve this page
Page status: Not set
You can:
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion