[DatePicker] getting formated date inside the context ?

[thevipinmishra]

Hi, I'm trying to build a DatePicker component in React, but without the DatePicker.Input and only the DatePicker.Trigger

Here's my progress so far.

"use client";

import { cn, tv } from "@/lib/tv.config";
import { Portal } from "@ark-ui/react";
import {
  type DatePickerRootProps as PrimitiveRootProps,
  DatePicker as Primitive,
} from "@ark-ui/react/date-picker";
import { CalendarBlank } from "@phosphor-icons/react";
import { inputVariants } from "./Input";
import { CalendarContent } from "./Calendar";
import { popoverVariants } from "./Popover";

interface DatePickerRootProps extends PrimitiveRootProps {
  placeholder?: string;
}

const datePickerVariants = tv({
  slots: {
    content: [
      popoverVariants().content(),
      "max-w-xs bg-card shadow-md p-4 rounded-md",
    ],
  },
});

const DatePicker = (props: DatePickerRootProps) => {
  const {
    className,
    timeZone,
    locale,
    placeholder = "Select",
    ...rest
  } = props;

  return (
    <Primitive.Root timeZone={timeZone} locale={locale} {...rest}>
      <Primitive.Control>
        <Primitive.Context>
          {(context) => (
            <Primitive.Trigger
              className={cn(inputVariants(), "flex items-center gap-4")}
            >
              <span
                className="flex-1 text-left text-ellipsis"
                data-placeholder={context.valueAsString.length === 0}
              >
                {context.valueAsString[0] || placeholder}
              </span>
              <CalendarBlank />
            </Primitive.Trigger>
          )}
        </Primitive.Context>
      </Primitive.Control>
      <Portal>
        <Primitive.Positioner>
          <CalendarContent className={datePickerVariants().content()} />
        </Primitive.Positioner>
      </Portal>
    </Primitive.Root>
  );
};

export { DatePicker };

I can't see the formatted date value in the context object.

I did check the internal implementation on getInputProps and found the following snippet:

 formattedValue(ctx2) {
    const opts = { timeZone: ctx2.timeZone, day: "2-digit", month: "2-digit", year: "numeric" };
    const formatter = new DateFormatter(ctx2.locale, opts);
    return ctx2.value.map((date) => ctx2.format?.(date) ?? formatter.format(date.toDate(ctx2.timeZone)));
}

I think putting this calculatedValue inside the context object would make it easy for such use cases.

Please let me know if there's any other way to get this doen easily, especially without the @internationalized/date dependency at our end.

Appreciate the good work!

[thevipinmishra]

With the @ark-ui/react 4.9.0 update, I think we do have the correctly formatted dates now.

Thanks for the great work!