New Component: Date/Time picker

[tminhduc2811]

Hi, I think this is a great project. Having a Date/Time picker component would be really helpful

Something like this https://mui.com/components/pickers/

[neoromantic]

Anyone found a good solution? Maybe someone had made a wrapper over NextUI to have a nice date picker?

[getellez]

I had to create a custom component using the material ui datepicker and I used the material UI providers only within that custom component to avoid style conflicts between material UI and Tailwind (I'm using tailwind and nextui only, in my project)

[getellez]

type CustomDatePickerProps = {
  birthDate: Date | null;
  setBirthDate: React.Dispatch<React.SetStateAction<Date | null>>;
};
export const CustomDatePicker: FC<CustomDatePickerProps> = ({ birthDate, setBirthDate }) => {
  const { theme } = useTheme();
  return (
    <DatePickerWrapper>
      <DatePicker
        format='dd/MM/yyyy'
        label='Fecha de nacimiento'
        name='birthDate'
        value={birthDate}
        sx={{
          '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
            borderColor: 'gray'
          },
          '&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
            borderColor: 'gray'
          },
          '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: 'gray'
          }
        }}
        slots={{
          openPickerIcon: () => <HiCalendarDays className={theme === 'dark' ? 'text-white' : 'text-gray'} />
        }}
        slotProps={{
          textField: {
            variant: 'outlined',
            inputProps: {
              style: { color: theme === 'dark' ? 'white' : 'gray' }
            },
            InputLabelProps: { style: { color: theme === 'dark' ? 'white' : 'gray' } }
          }
        }}
        onChange={(newValue) => setBirthDate(newValue)}
      />
    </DatePickerWrapper>
  );
};

[tabuckner]

Am I crazy, or does this not already exist as <Input type="date" />?

[tabuckner]

No i'm crazy.

[jrgarciadev]

https://nextui.org/docs/components/input#input-types

[ssijak]

its not well suported in all browsers, and rendering is different in the ones it is. also not a lot of customisation options

[hoetmaaiers]

A Date/Time range selector is not possible with native input-types. This would make a good component.

[popuguytheparrot]

https://react-spectrum.adobe.com/react-spectrum/Calendar.html

[rockse]

I would love to know if this is coming anytime soon. I am considering nextui to build a dashboard and need a date picker.

[mauriciabad]

In Storybook there's an Input with type date and another with time.

https://storybook.nextui.org/?path=/story/components-input--input-types

[jim-king-2000]

How to see the source of the storybook?

[serdaronedio]

it's a native date-picker, you can read this:

https://dev.to/codeclown/styling-a-native-date-input-into-a-custom-no-library-datepicker-2in

[vijayganeshpk]

How to see the source of the storybook?

@jim-king-2000 check https://github.com/nextui-org/nextui/tree/main/packages/components/input/stories

[jim-king-2000]

Great! I'll look into it. Thanks.

[Lzadhito]

Creating such component should be great! Would styling the native input (such as -webkit-calendar-picker-indicator) get the work done? or better to create a custom date picker as a base component to be reused by another such as range picker?

[ssijak]

This is a must-have for a component library; it's a staple component used in most apps.

[mxvsh]

any update on this????

[J4v4Scr1pt]

+1

[rivaslive]

You can create a custom one, using react-day-picker for example.

import { Popover, PopoverContent, PopoverTrigger, Input } from '@nextui-org/react';
import dayjs from 'dayjs';
import { CalendarIcon, X } from 'lucide-react';
import { useEffect, useState } from 'react';
import { DayPicker } from "react-day-picker"
import 'react-day-picker/dist/style.css'

import { cn, formatDate } from '@/lib/utils';
import { InputProps } from '@/lib/ui/input.tsx';
import useToggle from '@/hooks/useToggle.ts';

export function DatePicker({
  placeholder,
  onChange,
  value,
  ...rest
}: Omit<InputProps, 'onChange'> & { onChange?: (val?: string) => void }) {
  const [open, actions] = useToggle();
  const [date, setDate] = useState<string>();

  useEffect(() => {
    typeof value !== 'undefined' && setDate(value);
  }, [value]);

  return (
    <Popover isOpen={open} onOpenChange={actions.setVisible}>
      <PopoverTrigger className="text-left">
        <Input
          {...rest}
          startContent={
            <div
              onClick={rest?.onClick}
              className="absolute flex gap-2 flex-shrink-0 items-center z-10"
            >
              <div>
                <CalendarIcon size="20px" />
              </div>{' '}
              {!date && (
                <span className="text-foreground-500 font-normal w-full text-left text-small truncate">
                  {placeholder}
                </span>
              )}
            </div>
          }
          endContent={
            date && (
              <X
                size="20px"
                className="cursor-pointer"
                onClick={(e) => {
                  e?.stopPropagation();
                  e?.preventDefault();
                  setDate('');
                  onChange?.(undefined);
                }}
              />
            )
          }
          placeholder={placeholder}
          value={formatDate(date, false)}
          classNames={{
            input: cn('text-left ps-[30px!important] pt-5 z-20 h-full'),
            innerWrapper: 'flex'
          }}
        />
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <DayPicker
          mode="single"
          selected={dayjs(date).toDate()}
          onSelect={(_val) => {
            const _date = dayjs(_val).toISOString();
            setDate(_date);
            onChange?.(_date);
            actions.onHidden();
          }}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
}

This is just a reference code, you can do it the way you see fit.

[rivaslive]

@ssijak I don't know that he uses nextui below and worse even having this application open a long time ago and if Nextui uses react-aria he should have integrated this a long time ago, honestly sometimes it is unfortunate how such a basic component has cost so much to arrive, so my solution is a "worse is nothing" because the best solution is the one that NextUI should offer a long time ago

[Qudusayo]

Hi @rivaslive, can you help with the helper functions and hook as I couldn't recreate them properly.
Thanks

import { cn, formatDate } from '@/lib/utils';
import { InputProps } from '@/lib/ui/input.tsx';
import useToggle from '@/hooks/useToggle.ts';

[Qudusayo]

Here's my fix.

import { InputProps } from "@nextui-org/react";

import { cn, formatDate } from "@/lib/utils";
import useToggle from "@/hooks/useToggle";

// utils.ts
import dayjs from "dayjs";
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export function formatDate(dateString?: string, includeTime = true) {
  if (!dateString) return "";

  return dayjs(dateString).format(
    includeTime ? "DD/MM/YYYY hh:mm A" : "DD/MM/YYYY",
  );
}

// useToggle.ts
import { useState } from "react";

interface ToggleActions {
  setVisible: (visible: boolean) => void;
  onHidden: () => void;
}

function useToggle(initialValue = false): [boolean, ToggleActions] {
  const [isOpen, setIsOpen] = useState(initialValue);

  const toggle = () => setIsOpen(!isOpen);

  const setVisible = (visible: boolean) => setIsOpen(visible);

  const actions = {
    setVisible,
    onHidden: () => setIsOpen(false),
  };

  return [isOpen, actions];
}

export default useToggle;

[jrcopeti]

@rivaslive @Qudusayo Thanks for this! I'm using it in my project

[rivaslive]

Your welcome!

[J4v4Scr1pt]

There is a datepicker in review.😊

https://nextuioss.featurebase.app/p/date-range-picker

[aprilmintacpineda]

Why would you guys not want to accept Date in value prop? 😅

I needed to do this:

new CalendarDateTime(
  values.datetime.getFullYear(),
  values.datetime.getMonth(),
  values.datetime.getDay(),
  values.datetime.getHours(),
  values.datetime.getMinutes(),
  values.datetime.getSeconds(),
  values.datetime.getMilliseconds()
)

Not sure if there's a shorter way of doing this.

[wingkwong]

Why would you guys not want to accept Date in value prop? 😅

By default, JavaScript represents dates and times using the Date object. However, Date has many problems, including a very difficult to use API, lack of all internationalization support, and more. The Temporal proposal will eventually address this in the language, and @internationalized/date is heavily inspired by it. We hope to back the objects in this package with it once it is implemented in browsers.

Not sure if there's a shorter way of doing this.

Can you share the full code? Wondering what the type of values is and the way you init.

[Qudusayo]

Date component is now available https://nextui.org/blog/v2.3.0