How to change date time format in HTML5?

HTML5 provides several input types for date and time, but formatting them requires JavaScript. The default browser format can be customized using JavaScript date methods or libraries.

HTML5 Date Input Types

HTML5 offers various date and time input types:

<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

Basic Date Formatting with JavaScript

You can format dates using JavaScript's built-in methods:

<input type="date" id="dateInput" value="2024-01-15">
<p id="output"></p>

<script>
const dateInput = document.getElementById('dateInput');
const output = document.getElementById('output');

dateInput.addEventListener('change', function() {
    const date = new Date(this.value);
    
    // Different format options
    const options1 = { year: 'numeric', month: 'long', day: 'numeric' };
    const options2 = { year: 'numeric', month: '2-digit', day: '2-digit' };
    
    const formatted1 = date.toLocaleDateString('en-US', options1);
    const formatted2 = date.toLocaleDateString('en-GB', options2);
    
    output.innerHTML = `
        US Format: ${formatted1}<br>
        UK Format: ${formatted2}
    `;
});

// Initial display
const initialDate = new Date(dateInput.value);
output.innerHTML = `Selected: ${initialDate.toLocaleDateString('en-US')}`;
</script>

Custom Date Formatting Function

Create a reusable function for custom date formats:

<input type="datetime-local" id="datetimeInput" value="2024-01-15T10:30">
<div id="result"></div>

<script>
function formatDateTime(date, format) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    return format
        .replace('yyyy', year)
        .replace('mm', month)
        .replace('dd', day)
        .replace('HH', hours)
        .replace('MM', minutes);
}

const datetimeInput = document.getElementById('datetimeInput');
const result = document.getElementById('result');

datetimeInput.addEventListener('change', function() {
    const date = new Date(this.value);
    
    const formats = [
        'dd/mm/yyyy HH:MM',
        'yyyy-mm-dd HH:MM',
        'mm/dd/yyyy HH:MM'
    ];
    
    let output = '';
    formats.forEach(format => {
        output += `${format}: ${formatDateTime(date, format)}<br>`;
    });
    
    result.innerHTML = output;
});

// Initial display
const initialDateTime = new Date(datetimeInput.value);
result.innerHTML = `Default: ${formatDateTime(initialDateTime, 'dd/mm/yyyy HH:MM')}`;
</script>

Using Intl.DateTimeFormat for Localization

For international date formatting, use the Intl.DateTimeFormat API:

<input type="date" id="intlDate" value="2024-01-15">
<div id="intlOutput"></div>

<script>
const intlDate = document.getElementById('intlDate');
const intlOutput = document.getElementById('intlOutput');

function displayInternationalFormats(dateValue) {
    const date = new Date(dateValue);
    
    const locales = [
        { locale: 'en-US', name: 'US' },
        { locale: 'en-GB', name: 'UK' },
        { locale: 'de-DE', name: 'German' },
        { locale: 'ja-JP', name: 'Japanese' }
    ];
    
    let output = '';
    locales.forEach(loc => {
        const formatted = new Intl.DateTimeFormat(loc.locale, {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        }).format(date);
        output += `${loc.name}: ${formatted}<br>`;
    });
    
    intlOutput.innerHTML = output;
}

intlDate.addEventListener('change', function() {
    displayInternationalFormats(this.value);
});

// Initial display
displayInternationalFormats(intlDate.value);
</script>

Browser Compatibility

Conclusion

HTML5 date inputs provide native browser support, but JavaScript is needed for custom formatting. Use Intl.DateTimeFormat for internationalization and create reusable functions for consistent formatting across your application.