Detailed explanation of the Date field in ButterCMS, including input, output, configuration options, use cases, formatting options, and calendar picker
The Date field provides you with a calendar selector that enables content editors to easily pick dates and times, which will be returned by the API in ISO 8601 formatted strings.
You can update your timezone in settings, but this doesn’t add timezone support to datetime fields. Instead, it changes the updated and published fields on your Content Type objects from the default of UTC to whatever timezone you choose.
Dates in ButterCMS Date fields are stored and returned without time zones. You’ll need to handle time zone conversion in your application for proper display.
JavasScript
Python
Ruby
PHP
const butter = require('buttercms')('your-api-key');const response = await butter.page.retrieve('*', 'event-page');const event = response.data.data.fields;// Parse the ISO date stringconst eventDate = new Date(event.event_date);// Format for displayconst formattedDate = eventDate.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'});// "Friday, March 15, 2024"const formattedTime = eventDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit'});// "2:30 PM"// Using date-fns libraryimport { format, parseISO } from 'date-fns';const formatted = format(parseISO(event.event_date), 'MMMM d, yyyy h:mm a');// "March 15, 2024 2:30 PM"
from datetime import datetimefrom butter_cms import ButterCMSclient = ButterCMS('your-api-key')response = client.pages.get('*', 'event-page')event = response['data']['fields']# Parse the ISO date stringevent_date = datetime.fromisoformat(event['event_date'].replace('Z', '+00:00'))# Format for displayformatted_date = event_date.strftime('%B %d, %Y') # "March 15, 2024"formatted_time = event_date.strftime('%I:%M %p') # "02:30 PM"formatted_full = event_date.strftime('%A, %B %d, %Y at %I:%M %p')# "Friday, March 15, 2024 at 02:30 PM"
require 'buttercms-ruby'ButterCMS::api_token = 'your-api-key'response = ButterCMS::Page.get('*', 'event-page')event = response.data.fields# Parse the ISO date stringevent_date = DateTime.parse(event.event_date)# Format for displayformatted_date = event_date.strftime('%B %d, %Y') # "March 15, 2024"formatted_time = event_date.strftime('%l:%M %p') # " 2:30 PM"
$butter = new ButterCMS\ButterCMS('your-api-key');$response = $butter->fetchPage('*', 'event-page');$event = $response->data->fields;// Parse the ISO date string$eventDate = new DateTime($event->event_date);// Format for display$formattedDate = $eventDate->format('F j, Y'); // "March 15, 2024"$formattedTime = $eventDate->format('g:i A'); // "2:30 PM"$formattedFull = $eventDate->format('l, F j, Y \a\t g:i A');// "Friday, March 15, 2024 at 2:30 PM"
