Skip to main content

Date Time Input

Basic​

Basic example of the DateTimeInput component.

 
const BasicComponent = () => {
  return <DateTimeInput></DateTimeInput>;
};

With Label​

You can use the DateTimeInput.Label component to add a label to the DateTimeInput component.

Event Start Date

 
const WithLabelComponent = () => {
  return (
    <DateTimeInput>
      <DateTimeInput.Label>Event Start Date</DateTimeInput.Label>
    </DateTimeInput>
  );
};

Date and Time Modes​

The DateTimeInput component supports two modes: datetime and date. The datetime mode is the default mode. To switch to the date mode, set the mode prop to date.

Appointment Date & Time

Your Birthday

 
const DateAndTimeModesComponent = () => {
  return (
    <>
      <DateTimeInput mode="datetime">
        <DateTimeInput.Label>Appointment Date & Time</DateTimeInput.Label>
      </DateTimeInput>
      <DateTimeInput mode="date">
        <DateTimeInput.Label>Your Birthday</DateTimeInput.Label>
      </DateTimeInput>
    </>
  );
};

Disabled​

Use the isDisabled prop to disable the DateTimeInput component.

 
const DisabledComponent = () => {
  return <DateTimeInput isDisabled></DateTimeInput>;
};

With Placeholder​

Use the placeholder prop to add a placeholder to the DateTimeInput component.

 
const WithPlaceholderComponent = () => {
  return <DateTimeInput placeholder="Select your travel date"></DateTimeInput>;
};

On Change Date​

Use the onChangeDate prop to add a callback function that is triggered when the date is changed. The callback function receives the new date as an argument.

 
const OnChangeDateComponent = () => {
  return (
    <DateTimeInput
      onChangeDate={(date) => console.log("Selected date:", date)}
    ></DateTimeInput>
  );
};

With Value​

Use the value prop to set the initial value of the DateTimeInput component.

 
const WithValueComponent = () => {
  return <DateTimeInput value={new Date()}></DateTimeInput>;
};

With Custom Format​

Use the format prop to set a custom format for the date displayed in the DateTimeInput component. You can choose between the following formats: YYYY/MM/DD, DD/MM/YYYY, MM/DD/YYYY

 
const WithCustomFormatComponent = () => {
  return <DateTimeInput format="YYYY/MM/DD"></DateTimeInput>;
};

Overriding Color Mode​

Use the colorMode prop to override the color mode of the DateTimeInput component.

 
const OverridingColorModeComponent = () => {
  return <DateTimeInput colorMode="dark"></DateTimeInput>;
};

Overriding Accent Color​

Use the accentColor prop to override the accent color of the DateTimeInput component.

 
const OverridingAccentColorComponent = () => {
  return <DateTimeInput accentColor={"emerald"}></DateTimeInput>;
};

Overriding Color Mode and Accent Color​

You can use the colorMode and accentColor props together to override the color mode and accent color of the DateTimeInput component.

 
const OverridingColorModeAndAccentColorComponent = () => {
  return (
    <DateTimeInput
      colorMode="dark"
      accentColor={"emerald"}
    ></DateTimeInput>
  );
};