외부라이브러리 - Jquery-ui Calendar

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>
        &nbsp;&nbsp;
        {/* 특정 날짜를 달력 입력창에 표시하는 버튼 */}
        <button
          className="btn btn-primary btn-sm mt-2 mb-2"
          onClick={() => setDate()}
        >
          날짜 지정
        </button>
        <br />
      </div>
    </div>
  );
}

export default Datepicker;