DaterangePicker
# 8-2) range calendar 달력
# 공식 홈페이지 : https://www.daterangepicker.com/
<!-- 8-2) calendar css -->
<link rel="stylesheet" href="css/daterangepicker.css">
<!-- 8-2) range calendar 공홈 : https://www.daterangepicker.com/ -->
<script src="js/moment.min.js"></script>
<script src="js/daterangepicker.js"></script>
컴포넌트 코드
// DaterangePicker.js
import React, { useEffect, useRef, useState } from "react";
/* eslint-disable */
function DaterangePicker() {
const [jdate, setJdate] = useState("");
// TODO : 특수한 함수 : 리액트에서 지정한 태그에 직접 접근할때 사용
const daterange = useRef<HTMLInputElement>(null);
// TODO : 화면이 뜰때 달력 생성
useEffect(() => {
if ($("#daterange").length) { // daterange있을땜나 실행
// TODO : 사용법 : $(선택자).daterangepicker({옵션})
($("#daterange") as any).daterangepicker({
timePicker: true, // 시간(시:분) 표현
timePicker24Hour: true, // 24시 표현
timePickerSeconds: true, // (시:분:초) 표현
locale: {
format: "YYYY-MM-DD HH:mm:ss", // 달력 포맷
},
// singleDatePicker: true // 달력 1개 사용 (default 값이 달력 2개)
});
}
},[]);
// TODO : 수동 바인딩
const onChangeJdate = (event:React.ChangeEvent<HTMLInputElement>) => {
setJdate(event.target.value);
};
// TODO : 달력값 가져오기 : alert() : 나중에 바꿔야 할 부분
const printDate = () => {alert(daterange.current?.value)};
return (
<div className="container">
<div className="form-group">
<label htmlFor="daterange">daterange</label>
{/* 달력 시작 */}
{/* TODO : 사용법 : ref={변수} */}
<input
type="text"
className="form-control"
id="daterange"
name="daterange"
value={jdate}
onChange={onChangeJdate}
ref={daterange}
/>
{/* 달력 끝 */}
{/* 버튼 시작 */}
<button className="btn btn-primary btn-sm mt-2 mb-2" onClick={printDate}>
출력
</button>
{/* 버튼 끝 */}
<br />
</div>
</div>
);
}
export default DaterangePicker;
실행 결과
'React > React - 외부라이브러리' 카테고리의 다른 글
외부 라이브러리 - redux (0) | 2023.11.14 |
---|---|
외부라이브러리 - swiper (0) | 2023.11.06 |
외부라이브러리 - Jquery-ui Calendar (0) | 2023.10.31 |
외부라이브러리 - Easing (0) | 2023.10.31 |
외부라이브러리 - Isotope (0) | 2023.10.30 |