useDateTimePicker

Birleşik tarih ve saat seçimi için hook. useDatePicker hook’unu saat durumu (saat, dakika, saniye, periyot) ve iç içe bir saat seçici ile genişletir.

Import

import { useDateTimePicker } from "react-date-range-picker-headless";

Kullanım

import { useState } from "react";
import { useDateTimePicker } from "react-date-range-picker-headless";

function MyDateTimePicker() {
  const [dateTime, setDateTime] = useState<Date | null>(null);

  const picker = useDateTimePicker({
    value: dateTime,
    onChange: setDateTime,
    time: { precision: "minute", hourFormat: "24", minuteStep: 5 },
  });

  return (
    <div ref={picker.containerRef}>
      <button onClick={picker.handleToggle}>
        {picker.displayValue || picker.locale.dateTimePlaceholder}
      </button>
      {picker.isOpen && (
        <div ref={picker.popupRef} onKeyDown={picker.handleKeyDown}>
          {/* Takvim (useDatePicker ile aynı) */}
          <div>
            <button onClick={picker.handlePrevMonth}>{picker.locale.prevMonth}</button>
            <span>{picker.locale.formatMonthYear(picker.calendar.month)}</span>
            <button onClick={picker.handleNextMonth}>{picker.locale.nextMonth}</button>
          </div>
          {/* ...takvim ızgarası... */}

          {/* Saat gösterimi */}
          <div>
            <span>Time: {picker.timeDisplayValue}</span>
          </div>

          {/* Saat kontrolleri */}
          <div>
            <input
              type="number"
              value={picker.tempHour}
              onChange={(e) => picker.handleHourChange(Number(e.target.value))}
            />
            <span>:</span>
            <input
              type="number"
              value={picker.tempMinute}
              onChange={(e) => picker.handleMinuteChange(Number(e.target.value))}
            />
          </div>

          <button onClick={picker.handleConfirm}>{picker.locale.confirm}</button>
        </div>
      )}
    </div>
  );
}

Seçenekler

Seçenek	Tür	Varsayılan	Açıklama
`value`	`Date \| null`	—	Gerekli. Mevcut tarih-saat değeri.
`onChange`	`(dateTime: Date \| null) => void`	—	Gerekli. Tarih-saat değiştiğinde çağrılır.
`time`	`TimeConfig`	`{ precision: "minute", hourFormat: "24", minuteStep: 5, secondStep: 1 }`	Saat seçici yapılandırması.
`minDate`	`Date`	—	Seçilebilecek en erken tarih.
`maxDate`	`Date`	—	Seçilebilecek en geç tarih.
`locale`	`Partial<Locale>`	`DEFAULT_LOCALE`	Yerelleştirme metinlerini geçersiz kılın.
`initialMonth`	`Date`	—	Görüntülenecek başlangıç ayı.
`size`	`DatePickerSize`	—	UI aktarımı.
`weekStartsOn`	`WeekDay`	`"sunday"`	Haftanın ilk günü.
`isDateUnavailable`	`(date: Date) => boolean`	—	Belirli tarihleri devre dışı bırakmak için özel fonksiyon.
`displayFormat`	`string`	—	Görüntülenen değer için özel format metni.
`open`	`boolean`	—	Kontrollü açık durumu.
`initialOpen`	`boolean`	`false`	Başlangıçtaki açık durumu.
`onOpenChange`	`(open: boolean) => void`	—	Açık durumu değiştiğinde geri arama.
`required`	`boolean`	`false`	True olduğunda, `handleClear` bir işlem yapmaz.
`today`	`Date`	`new Date()`	Bugünün tarihini geçersiz kılın.
`onMonthChange`	`(month: Date) => void`	—	Ay değiştiğinde geri arama.
`disablePast`	`boolean`	`false`	Geçmiş tarihleri devre dışı bırak.
`disableFuture`	`boolean`	`false`	Gelecek tarihleri devre dışı bırak.
`showOutsideDays`	`boolean`	`false`	Bitişik ay günlerini göster.
`highlightDates`	`Date[]`	—	Vurgulanacak tarihler.
`shouldCloseOnSelect`	`boolean`	`false`	Tarih-saat seçiciler için, yalnızca ön ayar tıklamaları için geçerlidir, tarih tıklamaları için değil.
`numberOfMonths`	`number`	`1`	Takvim ayı sayısı.
`captionLayout`	`CaptionLayout`	`"buttons"`	Başlık düzeni modu.
`fromYear`	`number`	current year - 100	Açılır menü için başlangıç yılı.
`toYear`	`number`	current year + 10	Açılır menü için bitiş yılı.

Dönen Değerler

Tarih Durumu

İsim	Tür	Açıklama
`isOpen`	`boolean`	Açılır pencerenin açık olup olmadığı.
`tempDate`	`Date \| null`	Geçici olarak seçilen tarih.
`currentMonth`	`Date`	Şu an görüntülenen ay.
`locale`	`Locale`	Çözümlenmiş yerelleştirme nesnesi.

Saat Durumu

İsim	Tür	Açıklama
`isTimePickerOpen`	`boolean`	Saat seçici alt panelinin açık olup olmadığı.
`tempHour`	`number`	Mevcut geçici saat değeri.
`tempMinute`	`number`	Mevcut geçici dakika değeri.
`tempSecond`	`number`	Mevcut geçici saniye değeri.
`tempPeriod`	`TimePeriod`	Mevcut AM/PM periyodu (`"AM"` veya `"PM"`).

Tarih Eylemleri

İsim	Tür	Açıklama
`handleDateClick`	`(date: Date) => void`	Gün hücresi tıklamasını yönet.
`handlePrevMonth`	`() => void`	Önceki aya git.
`handleNextMonth`	`() => void`	Sonraki aya git.
`handleOpen`	`() => void`	Açılır pencereyi aç.
`handleClose`	`() => void`	Açılır pencereyi kapat.
`handleToggle`	`() => void`	Açılır pencereyi aç/kapat.
`handleConfirm`	`() => void`	Tarih + saati onayla ve kapat.
`handleCancel`	`() => void`	İptal et ve geri al.
`handleClear`	`() => void`	Değeri temizle.
`handleGoToToday`	`() => void`	Bugüne git.

Saat Eylemleri

İsim	Tür	Açıklama
`handleHourChange`	`(hour: number) => void`	Saati güncelle.
`handleMinuteChange`	`(minute: number) => void`	Dakikayı güncelle.
`handleSecondChange`	`(second: number) => void`	Saniyeyi güncelle.
`handlePeriodChange`	`(period: TimePeriod) => void`	AM/PM arasında geçiş yap.
`handleTimePickerOpen`	`() => void`	Saat seçici alt panelini aç.
`handleTimePickerClose`	`() => void`	Saat seçici alt panelini kapat.
`handleTimePickerConfirm`	`() => void`	Saat seçici alt panelini onayla.
`handleTimePickerCancel`	`() => void`	Saat seçici alt panelini iptal et.

Hesaplanmış

İsim	Tür	Açıklama
`calendar`	`CalendarMonth`	Mevcut ay için takvim verileri.
`calendars`	`CalendarMonth[]`	Takvim ayları dizisi.
`getDayProps`	`(date: Date, referenceMonth?: Date) => DayProps`	Gün hücresi propları.
`displayValue`	`string`	Biçimlendirilmiş tarih-saat metni.
`timeDisplayValue`	`string`	Biçimlendirilmiş saat metni.
`hasValue`	`boolean`	Bir değerin onaylanıp onaylanmadığı.
`canConfirm`	`boolean`	Onaylamanın geçerli olup olmadığı.
`containerRef`	`RefObject<HTMLDivElement \| null>`	Konteyner ref’i.
`popupRef`	`RefObject<HTMLDivElement \| null>`	Açılır pencere ref’i.
`timePickerRef`	`RefObject<HTMLDivElement \| null>`	Saat seçici alt paneli ref’i.
`focusedDate`	`Date \| null`	Klavye ile odaklanılmış tarih.
`handleKeyDown`	`(e: KeyboardEvent<HTMLElement>) => void`	Klavye yöneticisi.
`resolvedTimeConfig`	`Required<TimeConfig>`	Varsayılanlarla doldurulmuş, çözümlenmiş saat yapılandırması.
`years`	`number[]`	Açılır menü modu için yıllar.
`months`	`number[]`	Açılır menü modu için aylar.
`handleYearSelect`	`(year: number, calendarIndex?: number) => void`	Yılı ayarla.
`handleMonthSelect`	`(month: number, calendarIndex?: number) => void`	Ayı ayarla.

Ana Davranışlar

Saat Yapılandırması

time seçeneği bir TimeConfig nesnesi kabul eder:

interface TimeConfig {
  precision?: "hour" | "minute" | "second"; // default: "minute"
  hourFormat?: "12" | "24"; // default: "24"
  minuteStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30; // default: 5
  secondStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30; // default: 1
  itemHeight?: number; // default: 32
}

shouldCloseOnSelect

Tarih-saat seçicileri için, shouldCloseOnSelect yalnızca ön ayar tıklamalarında tetiklenir, tarih tıklamalarında değil. Bunun nedeni, kullanıcının bir tarih seçtikten sonra hala saati ayarlaması gerekmesidir.

resolvedTimeConfig

resolvedTimeConfig dönüş değeri, tüm varsayılanların doldurulduğu tam olarak çözümlenmiş saat yapılandırmasını içerir. Saatle ilgili UI bileşenleri oluştururken varsayılanları yeniden hesaplamaktan kaçınmak için bunu kullanın.