Date Picker#

Tinka UI comes with styling for the third-party package react-datepicker in @tinka/tailwindcss.

This stylesheet is automatically imported when using Tailwindcss. If they are unused, Tailwind will purge them from the CSS output.

import { Icon, Input } from "@tinka/react";
import DatePicker from "react-datepicker";
 
<DatePicker
  selected={value}
  onChange={(date) => setValue(date)}
  customInput={
    <Input
      label="From"
      leftIcon="calendar"
      rightIcon={<Icon onClick={() => setStartDate(undefined)}>close</Icon>}
      className="w-full"
    />
  }
  dateFormat="dd-MM-yyyy"
  placeholderText="placeholder text"
/>;

The following is a set of recommendation to make react-datepicker look great on Tinka user interfaces:

• Always specify dateFormat prop to format dates correctly for your target audience.
• To render a Tinka-style input, use customInput prop of DatePicker.
• To render a clear button, use rightIcon prop of Input.
• To render a placeholder text on the input, use placeholderText prop of DatePicker.

To tell Tailwind keep the selectors used by react-datepicker, add the following line to the tailwind config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    /* ... */
    "node_modules/react-datepicker/dist/es/index.js",
    /* ... */
  ],
  presets: [require("../../packages/tailwindcss/config")],
};

<DatePicker
  customInput={<Input label="Time Select" className="w-full" />}
  showTimeSelect
  dateFormat="dd-MM-yyyy HH:mm:ss"
/>

• use showTimeSelect
• add time components to the dateFormat