TOAST UI DatePicker in Next.js

Result

Install

yarn add tui-date-picker

package.json

{
  "dependencies": {
    "tui-date-picker": "^4.3.3"
  },
  "engines": {
    "node": "^18.12.1"
  }
}

src/components/DatePicker.tsx

'use client'

import './DatePicker.css'

import { ForwardedRef, forwardRef, useEffect, useRef } from 'react'
import TDatePicker from 'tui-date-picker'

type Props = {
  className?: string
}

export default forwardRef(DatePicker)

function DatePicker({ className }: Props, ref: ForwardedRef<TDatePicker>) {
  const dateContainerRef = useRef<HTMLDivElement>(null)
  const dateInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (!dateContainerRef.current || !dateInputRef.current) return

    const datePicker = new TDatePicker(dateContainerRef.current, {
      input: {
        element: dateInputRef.current,
      },
      usageStatistics: false,
    })

    if (ref && typeof ref === 'object') {
      ref.current = datePicker
    }
  }, [ref])

  return (
    <div className={className}>
      <div className="tui-datepicker-input tui-datetime-input tui-has-focus">
        <input aria-label="Date-Time" ref={dateInputRef} type="text" />
        <span className="tui-ico-date"></span>
      </div>
      <div ref={dateContainerRef} style={{ marginTop: -1 }}></div>
    </div>
  )
}

src/components/DatePicker.css

@import url('https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.css');

.tui-datepicker-input {
  width: 100%;
  height: auto;
}

.tui-datepicker-input.tui-has-focus {
  border-color: rgb(229, 231, 235);
}

.tui-datepicker-input > input {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  font-size: 1rem;
}

src/app/pages.tsx

import DatePicker from '../components/DatePicker'

function Page() {
  function search() {
    console.log('👀 - dateRef.current?.getDate()', dateRef.current?.getDate())
  }
  
  const dateRef = useRef<TDatePicker>(null)
  
  return (
    <>
      <DatePicker className="" ref={dateRef} />
    </>
  )
}