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} />
</>
)
}