DD/MM/YYYY format
javascript
This code changes the US style date format for all events, blogs, and meta data to be DD/MM/YYYY.
How this works
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
The default date format on Squarespace is MM/DD/YYYY. This code will change the date format display for all blogs, events, and displayed meta data to be DD/MM/YYYY
There are three different formats to choose from: numerical only, abbreviated month (Mar, Oct, etc), and full month (September)
How to use this code
This code is designed to work on every page of your site. Copy this code using the copy button on the right. It’s recommended that you add it to your site wide header code injection.
You’ll find this under Website → Website Tools → Code Injection
/* Convert dates to DD/MM/YYYY Format - CustomCodey.com */
<script>
// Function to convert date to DDMMYYY format
function convertToUKFormat(dateStr) {
// Handle different date formats
let date;
// Handle "MM/DD/YY" format (like 10/18/21)
if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateStr)) {
const [month, day, year] = dateStr.split('/');
return `${day}/${month}/${year}`;
}
// Handle "MM/DD/YYYY" format
if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateStr)) {
const [month, day, year] = dateStr.split('/');
return `${day}/${month}/${year}`;
}
// Handle "Month DD, YYYY" format
if (/[A-Za-z]+ \d{1,2}, \d{4}/.test(dateStr)) {
date = new Date(dateStr);
}
// Handle "Month DD" format
else if (/[A-Za-z]+ \d{1,2}/.test(dateStr)) {
date = new Date(dateStr + ", " + new Date().getFullYear());
}
// Handle "Day, Month DD, YYYY" format
else if (/[A-Za-z]+, [A-Za-z]+ \d{1,2}, \d{4}/.test(dateStr)) {
date = new Date(dateStr);
}
// Try parsing as ISO date
else {
try {
date = new Date(dateStr);
} catch (e) {
return dateStr; // Return original if can't parse
}
}
// Check if date is valid
if (isNaN(date.getTime())) {
return dateStr;
}
// Format date
const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const year = date.getFullYear();
return `${day}/${month}/${year}`;
}
// Function to update all date formats on the page
function updateAllDates() {
// Update blog dates
document.querySelectorAll('.dt-published span').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update blog collection list dates
document.querySelectorAll('.blog-date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update event list and event item dates
document.querySelectorAll('.event-date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update summary block dates
document.querySelectorAll('.summary-metadata-item--date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update video list dates
document.querySelectorAll('.lessons-grid-meta-container').forEach(el => {
const text = el.innerHTML;
const dateMatch = text.match(/(\d{1,2}\/\d{1,2}\/\d{2})/);
if (dateMatch) {
el.innerHTML = text.replace(dateMatch[0], convertToUKFormat(dateMatch[0]));
}
});
// Update video page dates
document.querySelectorAll('.lesson-duration').forEach(el => {
if (el.textContent.match(/\d{1,2}\/\d{1,2}\/\d{2}/)) {
el.textContent = convertToUKFormat(el.textContent);
}
});
}
// Run the update when the page loads
document.addEventListener('DOMContentLoaded', updateAllDates);
// If your site uses AJAX for loading content, you might need to run this after content updates
// Example: If using Squarespace's native loading:
window.addEventListener('mercury:load', updateAllDates);
</script>/* Convert dates to DD (Abrev. Month) YYYY Format - CustomCodey.com */
<script>
// Array of month names
const monthNames = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
// Function to convert date to UK format with text month
function convertToUKFormat(dateStr) {
// Handle different date formats
let date;
// Handle "MM/DD/YY" format (like 10/18/21)
if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateStr)) {
const [month, day, year] = dateStr.split('/');
const monthName = monthNames[parseInt(month) - 1];
return `${day} ${monthName} '${year}`;
}
// Handle "MM/DD/YYYY" format
if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateStr)) {
const [month, day, year] = dateStr.split('/');
const monthName = monthNames[parseInt(month) - 1];
return `${day} ${monthName} ${year}`;
}
// Handle "Month DD, YYYY" format
if (/[A-Za-z]+ \d{1,2}, \d{4}/.test(dateStr)) {
date = new Date(dateStr);
}
// Handle "Month DD" format
else if (/[A-Za-z]+ \d{1,2}/.test(dateStr)) {
date = new Date(dateStr + ", " + new Date().getFullYear());
}
// Handle "Day, Month DD, YYYY" format
else if (/[A-Za-z]+, [A-Za-z]+ \d{1,2}, \d{4}/.test(dateStr)) {
date = new Date(dateStr);
}
// Try parsing as ISO date
else {
try {
date = new Date(dateStr);
} catch (e) {
return dateStr; // Return original if can't parse
}
}
// Check if date is valid
if (isNaN(date.getTime())) {
return dateStr;
}
// Format date with text month
const day = date.getDate().toString().padStart(2, '0');
const monthName = monthNames[date.getMonth()];
const year = date.getFullYear();
return `${day} ${monthName} ${year}`;
}
// Function to update all date formats on the page
function updateAllDates() {
// Update blog dates
document.querySelectorAll('.dt-published span').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update blog collection list dates
document.querySelectorAll('.blog-date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update event list and event item dates
document.querySelectorAll('.event-date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update summary block dates
document.querySelectorAll('.summary-metadata-item--date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update video list dates
document.querySelectorAll('.lessons-grid-meta-container').forEach(el => {
const text = el.innerHTML;
const dateMatch = text.match(/(\d{1,2}\/\d{1,2}\/\d{2})/);
if (dateMatch) {
el.innerHTML = text.replace(dateMatch[0], convertToUKFormat(dateMatch[0]));
}
});
// Update video page dates
document.querySelectorAll('.lesson-duration').forEach(el => {
if (el.textContent.match(/\d{1,2}\/\d{1,2}\/\d{2}/)) {
el.textContent = convertToUKFormat(el.textContent);
}
});
}
// Run the update when the page loads
document.addEventListener('DOMContentLoaded', updateAllDates);
// If your site uses AJAX for loading content, you might need to run this after content updates
window.addEventListener('mercury:load', updateAllDates);
</script>/* Convert dates to DD (Month) YYYY Format - CustomCodey.com */
<script>
// Array of month names
const monthNames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
// Function to convert date to UK format with text month
function convertToUKFormat(dateStr) {
// Handle different date formats
let date;
// Handle "MM/DD/YY" format (like 10/18/21)
if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateStr)) {
const [month, day, year] = dateStr.split('/');
const monthName = monthNames[parseInt(month) - 1];
return `${day} ${monthName} '${year}`;
}
// Handle "MM/DD/YYYY" format
if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateStr)) {
const [month, day, year] = dateStr.split('/');
const monthName = monthNames[parseInt(month) - 1];
return `${day} ${monthName} ${year}`;
}
// Handle "Month DD, YYYY" format
if (/[A-Za-z]+ \d{1,2}, \d{4}/.test(dateStr)) {
date = new Date(dateStr);
}
// Handle "Month DD" format
else if (/[A-Za-z]+ \d{1,2}/.test(dateStr)) {
date = new Date(dateStr + ", " + new Date().getFullYear());
}
// Handle "Day, Month DD, YYYY" format
else if (/[A-Za-z]+, [A-Za-z]+ \d{1,2}, \d{4}/.test(dateStr)) {
date = new Date(dateStr);
}
// Try parsing as ISO date
else {
try {
date = new Date(dateStr);
} catch (e) {
return dateStr; // Return original if can't parse
}
}
// Check if date is valid
if (isNaN(date.getTime())) {
return dateStr;
}
// Format date with text month
const day = date.getDate().toString().padStart(2, '0');
const monthName = monthNames[date.getMonth()];
const year = date.getFullYear();
return `${day} ${monthName} ${year}`;
}
// Function to update all date formats on the page
function updateAllDates() {
// Update blog dates
document.querySelectorAll('.dt-published span').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update blog collection list dates
document.querySelectorAll('.blog-date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update event list and event item dates
document.querySelectorAll('.event-date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update summary block dates
document.querySelectorAll('.summary-metadata-item--date').forEach(el => {
el.textContent = convertToUKFormat(el.textContent);
});
// Update video list dates
document.querySelectorAll('.lessons-grid-meta-container').forEach(el => {
const text = el.innerHTML;
const dateMatch = text.match(/(\d{1,2}\/\d{1,2}\/\d{2})/);
if (dateMatch) {
el.innerHTML = text.replace(dateMatch[0], convertToUKFormat(dateMatch[0]));
}
});
// Update video page dates
document.querySelectorAll('.lesson-duration').forEach(el => {
if (el.textContent.match(/\d{1,2}\/\d{1,2}\/\d{2}/)) {
el.textContent = convertToUKFormat(el.textContent);
}
});
}
// Run the update when the page loads
document.addEventListener('DOMContentLoaded', updateAllDates);
// If your site uses AJAX for loading content, you might need to run this after content updates
window.addEventListener('mercury:load', updateAllDates);
</script>