JQuery-ui Calendar
달력
공식 홈페이지
https://jqueryui.com/datepicker/
CDN
# 8-1) JQUERY-UI 달력
# 8-2) range calendar 달력
<!-- jquery ui : calendar -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- 10) jquery ui : calendar -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
8-3) jquery-ui typescript
npm i @types/jqueryui
컴포넌트
// Datepicker.tsx
import React, { useEffect, useRef, useState } from "react";
function Datepicker() {
const [jdate, setJdate] = useState("");
// TODO : 리액트에서 특정태그에 직접접근하는 방법 : const 변수명 = useRef()
// TODO : html input 태그 속성 정의 : ref={변수명}
// 바닐라 : querySelecter(선택자) 유사
const datepicker = useRef<HTMLInputElement>(null);
// TODO : 수동 바인딩
// TODO : 화면값 -> jdate 저장
const onChangeJdate = (event : any) => {
setJdate(event.target.value);
};
// TODO : 현재 달력(ref={datepicker})에 선택된 값을 출력하는 버튼
const printDate = () => {
// useRef 함수 값 가져오기 (달력 연결 : 달력 값)
// es5 사용법 : 널리쉬 ?
// 변수?속성명 -> 만약 변수가 null이면 -> undefine로 변경
// 만약 변수가 null이 아니면 -> 속성명이 실행됨
alert(datepicker.current?.value);
// 또는
alert((datepicker.current as any).value)
// 또는
if(datepicker.current != null) {
alert(datepicker.current.value);
}
};
const setDate = () => {
(datepicker.current as any).value = "2023-10-30";
};
// TODO : 화면이 뜰때 달력 (외부 LIB 만들기)
useEffect(()=> {
$(function () {
// 사용법 : $(선택자).datepicker({옵션})
($("#datepicker") as any).datepicker(
// 날짜 포맷 지정
{
dateFormat: "yy-mm-dd",
showOn: "button", // 입력창 옆에 달력 기본 버튼 보이기
buttonImage: // 버튼에 기본 이미지 넣기
"http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
}
);
});
},[])
return (
<div className="container">
<div className="form-group">
<label htmlFor="daterange">daterange</label>
<p>
Date:
<input
type="text"
id="datepicker"
ref={datepicker} // 위의 useRef() : 특정 태그에 직접 접근방식
value={jdate}
onChange={onChangeJdate}
/>
</p>
<button
className="btn btn-primary btn-sm mt-2 mb-2"
onClick={printDate}
>
출력
</button>
{/* 특정 날짜를 달력 입력창에 표시하는 버튼 */}
<button
className="btn btn-primary btn-sm mt-2 mb-2"
onClick={() => setDate()}
>
날짜 지정
</button>
<br />
</div>
</div>
);
}
export default Datepicker;
'React > React - 외부라이브러리' 카테고리의 다른 글
외부라이브러리 - swiper (0) | 2023.11.06 |
---|---|
외부라이브러리 - DaterangePicker (1) | 2023.10.31 |
외부라이브러리 - Easing (0) | 2023.10.31 |
외부라이브러리 - Isotope (0) | 2023.10.30 |
외부라이브러리 - owl-carousel (0) | 2023.10.30 |