MDIS•SDC 통합포털

데이트피커(달력) 샘플

jQuery UI datepicker + 공통설정. 날짜 input 에 .datepicker(공통옵션) 한 줄이면 끝입니다. 값은 yy-mm-dd 문자열로 input 에 들어가고 $("#id").val() 로 읽습니다.
입력칸 모양은 퍼블 .form-calendar 컴포넌트를 씁니다 — 실제 적용 화면은 마이페이지 > 서비스 이용현황의 ‘추출일’ 입니다.

💡 옵션 고르기 — 두 가지만 정하면 됩니다
① 과거 날짜를 고를 수 있어야 하나? (신청일 등 앞날짜 = 불가 / 이력 조회 = 가능)
② 달력 아이콘을 누가 그리나? — .form-calendar 껍데기를 쓰면 화면이 그린다(아래 ①~③). 껍데기 없이 입력칸만 둘 땐 플러그인이 자동으로 만든다(④).

공통 옵션	과거 선택	트리거	이럴 때 씁니다
`datepickerOptPastNoBtn`	가능	만들지 않음(`showOn:"focus"`)	이 화면 ①~③ · 이용현황 추출일. `.form-calendar` 껍데기처럼 화면에 자체 아이콘이 있을 때
`datepickerOptPast`	가능	아이콘 자동 생성	껍데기 없이 입력칸만 둘 때(지난 이력 조회)
`datepickerOption`	불가(오늘 이후만)	아이콘 자동 생성	신청일·교육일처럼 앞으로의 날짜를 받는 일반 입력폼. 기존 화면 다수가 이 형태(④) — 손대게 되면 ①~③ 으로 교체
`datepickerOptNoBtn`	불가(오늘 이후만)	빈 버튼 생성 (옛 방식)	기존 화면 호환용. 신규는 아래 ‘조합이 없을 때’ 방식을 쓰세요

⚠ 세 가지 주의
① 껍데기(.form-calendar)와 자동 아이콘을 같이 쓰면 아이콘이 두 개 보입니다. 껍데기를 쓸 땐 반드시 …NoBtn(트리거 없음) 쪽을 고르세요.
② 공통 옵션 객체는 전역 공유입니다. 조건을 덧붙일 땐 복제하세요 — $.extend({}, datepickerOptPastNoBtn, { onSelect: … }). 원본을 고치면 다른 화면까지 바뀝니다.
③ datepickerOption 의 minDate 를 지우지 마세요. 150여 곳이 ‘오늘 이후만’을 전제로 동작 중이라, 기본값을 풀면 전 화면에서 과거 선택이 조용히 열립니다.

① 단일 날짜 (과거 포함)

datepickerOptPastNoBtn
입력칸 클릭 또는 아이콘 클릭으로 열림

② 기간 (시작 ~ 종료)

시작일을 고르면 종료일의 최소값이 자동 제한됩니다
(이용현황 ‘추출일’ 과 동일한 구성)

③ 오늘 이후만 · 껍데기

조합이 없을 때 — 공통 객체를 복제해 한 가지만 바꿉니다
$.extend({}, datepickerOption, {showOn:"focus"})

🔁 기존 화면을 손대게 되면 ①~③ 중 하나로 바꿔 주세요 (2026.08.13 팀 규칙)
지금 대부분의 화면(약 117 호출)은 아래 ④ 형태입니다. 일괄 변환은 하지 않습니다 — 화면마다 입력칸 높이·폭이 달라 한 번에 맞출 수 없고, 어차피 퍼블 전환 대상이기 때문입니다.
그 화면을 작업하는 김에 아래 두 가지만 바꾸면 됩니다.

마크업 — <input> 을 .form-calendar > span 으로 감싸고 .ico-calendar 버튼을 넣는다(①~③ 소스 복사)
옵션 — 껍데기를 쓰면 트리거가 겹치므로 …NoBtn 계열로 바꾸고, 아이콘 클릭은 .datepicker("show") 로 연다

④ 껍데기 없이 (기존 화면 방식) datepickerOption — 껍데기 마크업 없이 ①~③ 과 같아 보이고 같게 동작하게 만든 것
입력칸 클릭·아이콘 클릭 둘 다 열림(공통 기본값 showOn:"both")
플러그인이 아이콘을 input 바로 뒤 형제로 넣으므로, 인접 선택자(+)로 테두리를 맞물리면 한 덩어리가 됩니다
⚠ 이 맞물림 CSS 는 이 샘플에만 있습니다 — 기존 화면들은 아이콘이 입력칸 옆에 따로 붙은 모양으로 정상 동작합니다 (아이콘·팝업 달력은 공통이라 어디서나 동일)
어제 날짜는 회색으로 잠깁니다 · 신규 화면은 ①~③ 껍데기 방식을 권장