Hugging Face's logo

Spaces:
devarshia5
/
pmtool
Sleeping

App Files Community
pmtool
File size: 2,869 Bytes
d97b8f9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import * as React from "react";
import { format, parse } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

interface DateInputProps {
  value: string | null;
  onChange: (value: string | null) => void;
  className?: string;
  disabled?: boolean;
  placeholder?: string;
}

export function DateInput({

  value,

  onChange,

  className,

  disabled = false,

  placeholder = "Pick a date",

}: DateInputProps) {
  // Convert string date to Date object for the calendar
  const getDateValue = () => {
    if (!value) return undefined;
    try {
      return parse(value, "yyyy-MM-dd", new Date());
    } catch (e) {
      console.error("Invalid date format:", value);
      return undefined;
    }
  };

  // Update the date value as string in yyyy-MM-dd format
  const handleDateChange = (date: Date | undefined) => {
    if (!date) {
      onChange(null);
      return;
    }
    try {
      const formattedDate = format(date, "yyyy-MM-dd");
      onChange(formattedDate);
    } catch (e) {
      console.error("Error formatting date:", e);
    }
  };

  // Format date for display
  const getDisplayDate = () => {
    if (!value) return null;
    try {
      const date = parse(value, "yyyy-MM-dd", new Date());
      return format(date, "PPP"); // Human readable format
    } catch (e) {
      console.error("Error parsing date for display:", e);
      return value;
    }
  };

  return (
    <div className={cn("grid gap-2", className)}>

      <Popover>

        <PopoverTrigger asChild>

          <Button

            variant={"outline"}

            className={cn(

              "w-full justify-start text-left font-normal",

              !value && "text-muted-foreground"

            )}

            disabled={disabled}

          >

            <CalendarIcon className="mr-2 h-4 w-4" />

            {value ? getDisplayDate() : <span>{placeholder}</span>}

          </Button>

        </PopoverTrigger>

        <PopoverContent 

          className="w-auto p-0" 

          align="start"

          side="bottom"

          sideOffset={4}

          alignOffset={0}

          style={{ zIndex: 10000 }}

        >

          <div className="date-picker-wrapper">

            <Calendar

              mode="single"

              selected={getDateValue()}

              onSelect={(date) => handleDateChange(date)}

              initialFocus

              disabled={(date) => date > new Date('2100-01-01') || date < new Date('1900-01-01')}

            />

          </div>

        </PopoverContent>

      </Popover>

    </div>
  );
}