No Availability of calendar component

[saurabhcoded]

I have gone through the components and found a need for calendar component. happy to create one

[vladmoroz]

We’d love to have one, but this would have to be a primitive first. This isn't prioritised yet so I’d suggest for now, you can use a third-party one and style it using the Radix Themes CSS tokens so that it looks part.

[tresabhi]

I have a fully functioning prototype made purely with Radix components. Shouldn't be hard to implement into the base package? Radix team, let me know \:)

[vorant94]

@tresabhi can you please share the source code of this datepicker?

[tresabhi]

@vorant94 I wouldn't call this the most stable as it does live currently in the dev branch in my project. I am also not fully satisfied by the API, I may switch out the Date instances in the props and events for just a tuple of date, month, and year.

https://github.com/tresabhi/blitzkit/blob/main/src/components/DatePicker.tsx

[KhBaterdene]

i try to clone workOS date input

'use client';
import { CalendarIcon } from '@radix-ui/react-icons';
import { TextField, IconButton } from '@radix-ui/themes';
import React, { useRef, useState } from 'react';

const Datepicker = React.forwardRef<
  React.ElementRef<typeof TextField.Root>,
  React.ComponentPropsWithoutRef<typeof TextField.Root>
>((props, inputRef) => {
  const [type, setType] = useState<'text' | 'date'>('text');
  const inputElementRef = useRef<HTMLInputElement | null>(null);

  const handleIconClick = () => {
    if (inputElementRef.current) {
      setType('date');
      setTimeout(() => {
        inputElementRef.current?.focus();
        inputElementRef.current?.showPicker();
      });
    }
  };

  return (
    <TextField.Root
      type={type}
      ref={(element) => {
        inputElementRef.current = element;
        if (typeof inputRef === 'function') inputRef(element);
        else if (inputRef) inputRef.current = element;
      }}
      onFocus={() => setType('date')}
      onBlur={() => !props.value && setType('text')}
    >
      <TextField.Slot>
        <IconButton
          size="1"
          variant="ghost"
          radius="full"
          onClick={handleIconClick}
        >
          <CalendarIcon height="16" width="16" fill="currentColor" />
        </IconButton>
      </TextField.Slot>
    </TextField.Root>
  );
});

Datepicker.displayName = 'Datepicker';

export default Datepicker;

css:

input[type='date']::-webkit-inner-spin-button,
input[type='date']::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}