Request Date Picker And Date Range Picker

[Sarorn123]

Is your feature request related to a problem? Please describe.

I would be nice if have Date Picker And Date Range Picker

Describe the solution you'd like

Request Date Picker And Date Range Picker

Describe alternatives you've considered

Request Date Picker And Date Range Picker

Screenshots or Videos

Request Date Picker And Date Range Picker

[Moe03]

Was just about to suggest this feature too, something like MUI's date range picker would be very useful:
https://mui.com/x/react-date-pickers/date-range-picker/

[SaadFarooq-Dev]

It will be great to have a date-range picker as well to have a date-picker that can be styled just like other nextUI components.

[alilishan]

I am in love with NextUI. So please give us a date picker and a date range picker. Then we are all good

[mxvsh]

same, waiting for it to be added

[mxvsh]

any update on this, please?

[CliffJr]

Escalating the request, yes same as shadcn https://ui.shadcn.com/examples/dashboard

[J4v4Scr1pt]

+1

[MJChimal]

+1

[HiDraqula]

+1

[samuelluzsantana]

+1

[pablojsx]

Yeah would be great.

[skibaalex]

+1

[nziokajimkelly]

+1

[theonlyway]

I basically just use the shadcn implementation with some tweaks using some nextui components. This should get you started, someone else can take it further if they want.

popover button

<Popover placement='top' className='w-full'>
  <PopoverTrigger>
    <Button
      variant='bordered'
      aria-label='date'
      className={cn(
        'pl-3 text-left font-normal',
        !field.value && 'text-muted-foreground',
      )}
    >
      {field.value ? (
        format(field.value, 'PPP')
      ) : (
        <span>Pick a date</span>
      )}
      <CalendarIcon className='ml-auto h-4 w-4 opacity-50' />
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <Calendar
      mode='single'
      selected={field.value!}
      onSelect={(e) => {
        field.onChange(e);
        setIsDatePopoverOpen(false);
      }}
      defaultMonth={field.value!}
      captionLayout='dropdown'
      fromYear={new Date().getFullYear()}
      toYear={new Date().getFullYear() + 1}
      disabled={(date) => date < new Date()}
      initialFocus
    />
  </PopoverContent>
</Popover>

calendar component

/* eslint-disable @typescript-eslint/no-unused-vars */
'use client';

import * as React from 'react';
import { cn } from '@/lib/utils';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { DayPicker, DropdownProps } from 'react-day-picker';
import { Select, SelectItem } from '@nextui-org/react';

export type CalendarProps = React.ComponentProps<typeof DayPicker>;

function Calendar({
  className,
  classNames,
  showOutsideDays = false,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn('p-3', className)}
      classNames={{
        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
        month: 'space-y-4',
        caption: 'flex justify-center pt-1 relative items-center',
        caption_label: 'text-sm font-medium',
        caption_dropdowns: 'flex justify-center gap-1',
        nav: 'space-x-1 flex items-center',
        nav_button:
          'flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent outline-none border-medium bg-transparent text-tiny gap-unit-2 rounded-small px-unit-0 !gap-unit-0 transition-transform-colors-opacity motion-reduce:transition-none border-default text-default-foreground hover:!bg-default min-w-unit-8 w-unit-8 h-unit-8',
        nav_button_previous: 'absolute left-1',
        nav_button_next: 'absolute right-1',
        table: 'w-full border-collapse space-y-1',
        head_row: 'flex',
        head_cell:
          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
        row: 'flex w-full mt-2',
        cell: 'text-center rounded-small text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
        day: cn(
          'hover:bg-accent hover:text-accent-foreground rounded-small',
          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
        ),
        day_selected:
          'bg-primary rounded-small text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
        day_today: 'bg-accent text-accent-foreground',
        day_outside: 'text-muted-foreground opacity-50',
        day_disabled: 'text-muted-foreground opacity-50',
        day_range_middle:
          'aria-selected:bg-accent aria-selected:text-accent-foreground',
        day_hidden: 'invisible',
        ...classNames,
      }}
      components={{
        Dropdown: ({ value, onChange, children, ...props }: DropdownProps) => {
          const options = React.Children.toArray(
            children,
          ) as React.ReactElement<React.HTMLProps<HTMLOptionElement>>[];
          const [selectedValue, setSelectedValue] = React.useState<string>('');
          const handleSelectionChange = (
            e: React.ChangeEvent<HTMLSelectElement>,
          ) => {
            setSelectedValue(e.target.value);
            onChange?.(e);
          };
          React.useEffect(() => {
            for (let index = 0; index < options.length; index++) {
              const element = options[index];
              if (element.props.value === value) {
                setSelectedValue(element.props.value!.toString());
              }
            }
          }, []);

          return (
            <Select
              size='sm'
              className='flex w-[130px]'
              aria-label={props['aria-label']}
              selectedKeys={selectedValue === '' ? [] : [selectedValue]}
              onChange={handleSelectionChange}
            >
              {options.map((option, id: number) => (
                <SelectItem
                  key={option.props.value as string}
                  value={option.props.value as string}
                >
                  {option.props.children}
                </SelectItem>
              ))}
            </Select>
          );
        },
        IconLeft: ({ ...props }) => <ChevronLeft className='h-4 w-4' />,
        IconRight: ({ ...props }) => <ChevronRight className='h-4 w-4' />,
      }}
      {...props}
    />
  );
}
Calendar.displayName = 'Calendar';

export { Calendar };

[Corepex]

+1 would be nice to have 👍

[pourya-ataee]

+1

[AirP0WeR]

+1

[pettelau]

+1

[ssijak]

@jrgarciadev Are date and date-time picker components in the works, or planned? react-aria has great support for building those, and they are used in 100% of dashboard apps and a lot of marketing websites.

[emre88tosun]

+1

[vitalijalbu]

For all of you:
You can use rc-component (antd uses it) and has a lots of components to be reusable, like datepicker, selectors and so on...

https://github.com/react-component/picker
https://github.com/react-component

[DarkNasuada]

+1
Would be a great addition to this awesome Library

[pablojsx]

WE HAVE A DATE PICKER!

[pettelau]

Amazing job!

[Corepex]

awesome :D