Datetime

The Datetime datetime component handles timestamps value, it accepts date + time values in ISO format (i.e., “2023-05-12T22:14:49.116Z”) or JavaScript Date() object. The value returned by this component is always in ISO format .

Example


{
  "component": "datetime",
  "label": "Datetime field",
  "name": "my_datetime",
  "react-rsuite5": {
    "format": "dd/MM/yyyy - hh:mm"
  }
}

Installation

Some frameworks requires additional imports to enable date pickers and localization

RSuite


// ... usual imports for LetsForm
import CustomProvider from 'rsuite/CustomProvider';
import locale from 'rsuite/locales/it_IT';
 
const MyForm = () => {
  return (
    <CustomProvider locale={locale}>
      <LetsForm
        // params
      />
    </CustomProvider>
  );
};

Material UI

Material UI requires also the packages @mui/x-date-pickers and dayjs


// ... usual imports for LetsForm
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import 'dayjs/locale/it';
 
const MyForm = () => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="it">
      <LetsForm
        // params
      />
    </LocalizationProvider>
  );
};

AntD

AntD requires also the package dayjs


// ... usual imports for LetsForm
import { ConfigProvider } from 'antd';
import locale from 'antd/locale/it_IT';
import 'dayjs/locale/it';
 
const MyForm = () => {
  return (
    <ConfigProvider locale={locale}>
      <LetsForm
        // params
      />
    </ConfigProvider>
  );
};

Mantine


// ... usual imports for LetsForm
import 'dayjs/locale/it';
import { createTheme, MantineProvider } from '@mantine/core';
import '@mantine/dates/styles.css';
import '@mantine/core/styles.css';
 
const theme = createTheme({
  /** Put your mantine theme override here */
});
 
const MyForm = () => {
  return (
    <MantineProvider theme={theme}>
      <LetsForm
        // params
      />
    </MantineProvider>
  );
};

Reference

Property	Type	Description
component	string	= "datetime"
name	string	The name of the field and the key of the JSON
label	string \| i18n	Label of the field
hint	string \| i18n	Help text for the field (generally shown below the input box)
placeholder	string \| i18n	Placeholder text, visibile when the field is empty
disabled	boolean	Disables and greys out the field
readOnly	boolean	Put the field in read only mode
hidden	boolean	Hides the field from the form
className	string	CSS class name to assign to the field container
Pick up a framework to show specific properties Select framework