# yatra/3.0.4/resources/js/components/ui/date-picker.tsx

Yatra – Travel Booking & Tour Operator Software, version 3.0.4. 87 lines.

- Page: https://pluginprobe.com/plugins/yatra/3.0.4/code/resources/js/components/ui/date-picker.tsx
- Raw: https://pluginprobe.com/plugins/yatra/3.0.4/raw/resources/js/components/ui/date-picker.tsx
- Modified: 2026-04-14T03:47:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/yatra/3.0.4/code/resources/js/components/ui/date-picker.tsx#L10-L20`.

```tsx
import * as React from "react";
import { format, parse } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import { Calendar } from "./calendar";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
import { Button } from "./button";

export interface DatePickerProps {
  value?: string; // YYYY-MM-DD format
  onChange?: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  minDate?: Date;
  maxDate?: Date;
  className?: string;
  error?: boolean;
}

export const DatePicker: React.FC<DatePickerProps> = ({
  value,
  onChange,
  placeholder = "Select date",
  disabled = false,
  minDate,
  maxDate,
  className = "",
  error = false,
}) => {
  const [open, setOpen] = React.useState(false);

  // Parse date safely - check if value is valid and parse correctly
  let selectedDate: Date | undefined = undefined;
  if (value && value.trim()) {
    try {
      const parsed = parse(value, "yyyy-MM-dd", new Date());
      // Check if parsed date is valid
      if (!isNaN(parsed.getTime())) {
        selectedDate = parsed;
      }
    } catch (e) {
      // Invalid date format, leave as undefined
      selectedDate = undefined;
    }
  }

  const handleSelect = (date: Date | undefined) => {
    if (date) {
      onChange?.(format(date, "yyyy-MM-dd"));
      setOpen(false);
    }
  };

  // Format display value safely
  let displayValue = "";
  if (selectedDate && !isNaN(selectedDate.getTime())) {
    try {
      displayValue = format(selectedDate, "MMM dd, yyyy");
    } catch (e) {
      displayValue = "";
    }
  }

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          disabled={disabled}
          className={`w-full justify-start text-left font-normal ${error ? "border-red-500" : ""} ${!displayValue ? "text-gray-500" : ""} ${className}`}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {displayValue || <span className="text-gray-500">{placeholder}</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          selected={selectedDate}
          onSelect={handleSelect}
          minDate={minDate}
          maxDate={maxDate}
        />
      </PopoverContent>
    </Popover>
  );
};

```