Skip to main content

DHTMLX Kanban. Setting format for date input in the editor example

Date formatting conventions vary by region: US uses MM/DD/YYYY, Europe prefers DD.MM.YYYY. When the editor's date picker doesn't match your users' expectations, you can customize the display format through the editor field configuration.

Live example​

const { Kanban } = kanban;
const { cards, columns, rows } = getData();

new Kanban("#root", {
  columns,
  cards,
  editorShape: [
    {
      type: "date",
      key: "start_date",
      label: "Start Date",
      config: {
        format:"%m.%d.%Y"
      }
    }
  ],
});
<!-- component container -->
<div id="root" style="height: 100%;"></div>

<!-- dataset -->
<script src="https://snippet.dhtmlx.com/codebase/data/kanban/01/dataset.js"></script>

The code defines a date field in editorShape with config: { format: "%m.%d.%Y" }. This format string controls how the date is displayed in the editor's date picker input. The format uses %m for month, %d for day, and %Y for four-digit year, with dots as separators.

Solution overview​

  1. Add a date field to editorShape with type: "date"
  2. Set config: { format: "%m.%d.%Y" } to customize the display format
  3. The format applies to the date picker input display

Key points​

  • Display only: The format affects how dates appear in the editor input. The underlying Date object remains unchanged

  • Card display format: To change date format on cards, use cardShape.start_date.format

  • Format tokens: The format string uses strftime-style tokens. Separators (., /, -, spaces) are literal. Full token reference:

    TokenOutput
    %dDay, zero-padded (01-31)
    %jDay, no padding (1-31)
    %mMonth, zero-padded (01-12)
    %nMonth, no padding (1-12)
    %YYear, 4 digits
    %yYear, 2 digits
    %MMonth short name (Jan, Feb…)
    %FMonth full name (January, February…)
    %DWeekday short name (Mon, Tue…)
    %lWeekday full name (Monday, Tuesday…)
    %WWeek number, Monday start
    %wWeek number, locale weekStart
    %HHours 24h, zero-padded (00-23)
    %GHours 24h, no padding (0-23)
    %hHours 12h, zero-padded (01-12)
    %gHours 12h, no padding (1-12)
    %iMinutes, zero-padded (00-59)
    %sSeconds, zero-padded (00-59)
    %SMilliseconds (000-999)
    %aam/pm
    %AAM/PM
    %cISO 8601 datetime

API reference​

  • editorShape: Editor field configuration including date format

Additional resources​