RSuite DatePicker Displays MM/DD/YY Instead of DD/MM/YY – How to Change the Format?

[linesh98]

We are using FormBuilder Designer to build components, and I'm facing an issue with the RSuite DatePicker component.

When a user selects a date from the calendar, the DatePicker displays the date in the default MM/DD/YY format. However, I need it to display the date in the DD/MM/YY format.

How can I change the date format? Could you please provide a code snippet that I can include in my project?

Below is the designer code that I have included in my file:

`// src/pages/private/form-builder/Designer.tsx

import { useCallback, useEffect, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";

import {
components as rsuiteComponents,
formEngineRsuiteCssLoader,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";

import {
rSuiteTableComponents,
rSuiteTableComponentsDescriptions,
} from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");
if (newMode === "viewer") {
  leftPanel?.classList.add("hidden-panel");
  rightPanel?.classList.add("hidden-panel");
} else {
  leftPanel?.classList.remove("hidden-panel");
  rightPanel?.classList.remove("hidden-panel");
}

window.dispatchEvent(new Event("resize"));

}, [builder]);

return {label};
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem",
}}
>


</>
),
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
...rSuiteTableComponents.map((c) => c.build()),
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
richTextComponent.build(),
textEditor.build(),
],
[],
);
useEffect(() => {
if (globalThis.crypto && typeof globalThis.crypto.subtle === "undefined") {
Object.defineProperty(globalThis.crypto, "subtle", {
value: {
verify: async () => true,
importKey: async () => ({}),
},
configurable: true,
});
}
}, []);

/* ------------------------- Create Builder View --------------------------- */

const view = useMemo(() => {
return (
new CoreBuilderView(allComponents)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
.withCssLoader("common", formEngineRsuiteCssLoader)

    // Register library descriptions (LEFT PANEL)
    .withComponentLibraryDescription(fastQrComponentsDescriptions)
    .withComponentLibraryDescription(googleMapComponentsDescriptions)
    .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
    .withComponentLibraryDescription(signatureComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteComponentsDescriptions)
);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};
`

Also, could you please suggest a better way to structure this file so that it can accommodate all the current functionality as well as future enhancements? Any recommendations on improving its maintainability and scalability would be appreciated.

[sueun-dev]

Set the DatePicker's format property to dd/MM/yy and you'll get DD/MM/YY. In the Designer, pick the DatePicker and fill in the format field (it shows a yyyy-MM-dd placeholder). That value is handed straight to RSuite's DatePicker, so July 29 renders as 29/07/26 rather than 07/29/26.

One gotcha: the format uses date-fns v2 tokens and they're case sensitive. Lowercase dd is day, uppercase MM is month, yy is the 2-digit year. DD or YY are different tokens and actually get rejected as invalid, so keep the dd and yy lowercase.

[cherepanov]

Yep, you need to set Format property on the component

Or you can inherit from RsDatePicker component and set up defaults

export const rsDatePicker = define(RsDatePicker, 'RsDatePicker')
  .name('DatePicker')
  .category(fieldsCategory)
  .props({
    label: string.default('Date'),
    appearance: oneOf('default', 'subtle').withEditorProps({creatable: false}),
    calendarDefaultDate: date,
    cleanable: boolean.default(false),
    defaultOpen: boolean.default(false),
    defaultValue: date,
    disabled: disabled.default(false),
    readOnly,
    editable: boolean.default(true),
    format: string.validated(formatValidator, {
      code: 'INVALID_DATE_FORMAT',
      message: 'The provided date format is invalid'
    }).withEditorProps({placeholder: 'MM/dd/yyyy'}).default('MM/dd/yyyy'),