change date format in extjs

Learn change date format in extjs with practical examples, diagrams, and best practices. Covers extjs development techniques with visual explanations.
Tags:
Categories:

Mastering Date Formatting in ExtJS Applications

Hero image for change date format in extjs

Learn how to effectively format and display dates in your ExtJS applications using various configurations and best practices.

Date formatting is a common requirement in web applications, and ExtJS provides robust tools to handle it. Whether you're displaying dates in grids, forms, or custom components, understanding the various methods for formatting dates is crucial for a consistent and user-friendly experience. This article will guide you through the core concepts and practical implementations of date formatting in ExtJS.

Understanding ExtJS Date Formatting Basics

ExtJS leverages its Ext.Date utility class for all date-related operations, including parsing, formatting, and manipulation. The Ext.Date.format() method is the primary function used to convert a JavaScript Date object into a formatted string. It accepts a Date object and a format string as arguments. The format string uses a set of predefined tokens to specify how each part of the date (year, month, day, hour, minute, second) should be represented.

Ext.onReady(function() {
    var today = new Date();

    // Basic formatting
    var formattedDate1 = Ext.Date.format(today, 'Y-m-d'); // e.g., 2023-10-27
    console.log('Formatted Date (Y-m-d):', formattedDate1);

    // More detailed formatting
    var formattedDate2 = Ext.Date.format(today, 'F j, Y, g:i a'); // e.g., October 27, 2023, 3:30 pm
    console.log('Formatted Date (F j, Y, g:i a):', formattedDate2);

    // ISO 8601 format
    var formattedDate3 = Ext.Date.format(today, 'c'); // e.g., 2023-10-27T15:30:00.000Z
    console.log('Formatted Date (ISO 8601):', formattedDate3);
});

Basic usage of Ext.Date.format() with different format strings.

Date Formatting in ExtJS Components

ExtJS components like Ext.grid.column.Date and Ext.form.field.Date have built-in support for date formatting. You can specify the desired format using the format configuration property. This ensures that dates are displayed consistently across your UI without manual formatting in every renderer or handler.

flowchart TD
    A[Data Source (e.g., JSON)] --> B{Ext.data.Model}
    B --> C{Ext.grid.Panel or Ext.form.Panel}
    C --> D["Ext.grid.column.Date (format: 'Y-m-d')"]
    C --> E["Ext.form.field.Date (format: 'm/d/Y')"]
    D --> F["Display: '2023-10-27'"]
    E --> G["Display: '10/27/2023'"]

Flow of date data from source to formatted display in ExtJS components.

Ext.onReady(function() {
    // Example for Ext.grid.column.Date
    Ext.create('Ext.data.Store', {
        storeId: 'myStore',
        fields: ['name', { name: 'birthDate', type: 'date', dateFormat: 'Y-m-d' }],
        data: [
            { name: 'Alice', birthDate: '1990-05-15' },
            { name: 'Bob', birthDate: '1985-11-22' }
        ]
    });

    Ext.create('Ext.grid.Panel', {
        title: 'User Birthdays',
        store: Ext.data.StoreManager.lookup('myStore'),
        columns: [
            { text: 'Name', dataIndex: 'name', flex: 1 },
            {
                text: 'Birth Date',
                dataIndex: 'birthDate',
                xtype: 'datecolumn', // Use datecolumn xtype
                format: 'M j, Y', // Display format
                flex: 1
            }
        ],
        renderTo: Ext.getBody(),
        height: 200,
        width: 400
    });

    // Example for Ext.form.field.Date
    Ext.create('Ext.form.Panel', {
        title: 'Date Input',
        bodyPadding: 10,
        width: 300,
        items: [{
            xtype: 'datefield',
            fieldLabel: 'Event Date',
            name: 'eventDate',
            format: 'd/m/Y', // Display format for the field
            value: new Date() // Set a default value
        }],
        renderTo: Ext.getBody().createChild({ tag: 'div', style: 'margin-top: 20px;' })
    });
});

Implementing date formatting in an ExtJS Grid Panel and Form Field.

Global Date Formatting and Localization

For consistent date formatting across your entire application, you can set a global default format. This is particularly useful for localization, where different regions have different standard date formats. ExtJS allows you to configure the default date format via Ext.Date.defaultFormat or by loading locale-specific overrides.

Ext.onReady(function() {
    // Set a global default date format
    Ext.Date.defaultFormat = 'd-M-Y';

    var now = new Date();
    var globallyFormatted = Ext.Date.format(now, Ext.Date.defaultFormat);
    console.log('Globally formatted date:', globallyFormatted);

    // This also affects components that don't explicitly set a format
    Ext.create('Ext.form.Panel', {
        title: 'Global Date Format',
        bodyPadding: 10,
        width: 300,
        items: [{
            xtype: 'datefield',
            fieldLabel: 'Default Date',
            name: 'defaultDate',
            value: new Date() // Will use Ext.Date.defaultFormat
        }],
        renderTo: Ext.getBody().createChild({ tag: 'div', style: 'margin-top: 20px;' } })
    });

    // To override for a specific locale, you would typically load a locale file
    // For example, for German locale:
    // Ext.Date.monthNames = ["Januar", "Februar", ...];
    // Ext.Date.dayNames = ["Sonntag", "Montag", ...];
    // Ext.Date.defaultFormat = 'd.m.Y';
});

Setting a global default date format in ExtJS.

1. Define your desired format string

Consult the ExtJS documentation for Ext.Date to choose the appropriate format tokens (e.g., 'Y-m-d', 'F j, Y', 'd/m/Y H:i:s').

2. Apply format to Ext.Date.format()

For manual formatting of a Date object, use Ext.Date.format(myDateObject, 'YourFormatString').

3. Configure component format property

For Ext.grid.column.Date or Ext.form.field.Date, set the format: 'YourFormatString' configuration directly on the component.

4. Set global default (optional)

If consistent formatting is needed across many components, set Ext.Date.defaultFormat = 'YourFormatString' early in your application lifecycle.