DatePicker

() => {
  const [date, setDate] = React.useState<Date>();

  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); 
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
  };
  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <Button
          variant={'outline'}
        >
          {date ? formatDate(date) : <span>Pick a date </span>}
        </Button>
      </DatePickerTrigger>
      <DatePickerContents
        className='w-auto p-0'
        style={{ width: 'auto', padding: 0 }}
        align='start'
      >
        <DatePickerCalendar
          mode='single'
          selected={date}
          onSelect={setDate}
          initialFocus
        />
      </DatePickerContents>
    </DatePicker>
  )
}

() => {
  const [date, setDate] = React.useState<Date>();

  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); 
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
  };
  return (
    <DatePicker>
      <DatePickerTrigger asChild>
        <Button
          variant={'outline'}
        >
          {date ? formatDate(date) : <span>Pick a date </span>}
        </Button>
      </DatePickerTrigger>
      <DatePickerContents
        className='w-auto p-0'
        style={{ width: 'auto', padding: 0 }}
        align='start'
      >
        <DatePickerCalendar
          mode='single'
          selected={date}
          onSelect={setDate}
          initialFocus
        />
      </DatePickerContents>
    </DatePicker>
  )
}

() => {
  const [date, setDate] = React.useState({
    from: new Date('2025-03-12'),
    to: new Date('2025-03-05'),
  })
 
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); 
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
  };

  return (
    <div>
      <DatePicker>
        <DatePickerTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
          >
            {date?.from ? (
              date?.to ? `${formatDate(date.from)} ~ ${formatDate(date.to)}` : `${formatDate(date.from)}`
            ) : (<span>Pick a date</span>)}
          </Button>
        </DatePickerTrigger>
        <DatePickerContents style={{width:'auto'}} align="start">
          <DatePickerCalendar
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
          />
        </DatePickerContents>
      </DatePicker>
    </div>
  )
}