Nepali Date Picker(네팔 달력) jQuery 플러그인: BS↔AD 자동 변환 날짜 선택기 설치·옵션·활용 가이드

Nepali Date Picker(네팔 달력) jQuery 플러그인: BS↔AD 자동 변환 날짜 선택기 설치·옵션·활용 가이드

Bikram Sambat(BS) 지원 Anno Domini(AD) 자동 변환 7가지 테마 모바일/키보드 지원 MIT License

Nepali Date Picker는 네팔 공식 달력 체계인 Bikram Sambat(BS) 날짜를 입력/선택할 수 있도록 제공하는 jQuery 날짜 선택기입니다. 가장 큰 장점은 BS ↔ AD(서기) 양방향 자동 변환을 지원한다는 점입니다. 정부·행정·HR·예약·회계처럼 “공식 날짜 체계”가 중요한 화면에서 특히 유용합니다.

설명(요약)

• 네팔 날짜(BS) 기반 달력 UI 제공 + AD(서기)와 자동 변환
• 테마/언어/포맷/제약(최소·최대·비활성 날짜/범위) 옵션 지원
• 모바일 터치 최적화, 키보드 내비게이션, 모달 표시, SweetAlert2 팝업(선택) 연동 가능

키워드 태그(앞에 # 포함)

#NepaliDatePicker #BikramSambat #BSAD변환 #jQueryDatePicker #네팔달력 #날짜선택기 #웹폼 #프론트엔드 #SEO #SearchAIOptimization

데모 미리보기 공식 GitHub(소스/README) SweetAlert2(선택)

최신 정보(원문 기준): Publish Date / Last Update가 2026-01-21로 표기되어 있습니다.

목차 (버튼 바로가기)

1) 어떤 플러그인인가 2) 핵심 기능 요약 3) 설치 방법 4) 옵션(설정) 정리 5) 실전 예시(코드) 6) 활용 분야(업무/서비스) 7) 운영 팁/주의사항 8) 추천 태그

1) 어떤 플러그인인가

이 플러그인은 네팔에서 공식적으로 쓰이는 BS(Bikram Sambat) 달력으로 날짜를 고를 수 있게 해주며, 필요 시 AD(서기)로 변환해 저장/표시하는 흐름까지 지원합니다. 즉, “사용자는 BS로 입력 → 시스템은 AD로 변환/호환” 같은 구조를 만들기 좋습니다.

초보자 관점에서 핵심 포인트

• 입력창(input)에 붙여서 쓰는 형태
• 테마/언어/포맷/제약(기간 제한) 옵션만 지정하면 대부분 끝
• AD 날짜를 defaultDate로 넣으면 BS로 자동 변환하여 보여줄 수 있음

2) 핵심 기능 요약 (SEO 핵심 문장)

• BS↔AD 자동 변환: 양방향 변환을 지원하며, AD 기본값을 BS로 변환해 표시 가능
• 7가지 테마: light/dark/blue/red/purple/orange/green
• 이중 언어: Nepali / English 표시 옵션
• 포맷 지원: YYYY-MM-DD, DD-MM-YYYY, MM/DD/YYYY 등
• 제약 설정: minDate / maxDate / disabledDates / disabledDateRanges
• UX: 모바일 터치 최적화, 키보드 내비게이션, 모달 표시 가능
• 선택 기능: onSelect/onOpen/onClose 이벤트 훅 제공

3) 설치 방법 (가장 안전한 순서)

공식 README 및 소개 페이지에서 안내하는 기본 의존성은 아래 순서입니다.

구성	무엇을 넣나	비고
1) jQuery	jQuery 라이브러리	플러그인 기반
2) CSS	styles.css (테마/레이아웃 포함)	달력 UI 스타일
3) JS	jquery-nepali-datepicker.js	핵심 기능
4) SweetAlert2	선택(팝업 표시 시)	변환 팝업 등에 사용 가능

3-1) (예시) HTML에 포함하는 형태

<!-- jQuery (필수) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Nepali Datepicker CSS -->
<link rel="stylesheet" href="path/to/styles.css">

<!-- Nepali Datepicker JS -->
<script src="path/to/jquery-nepali-datepicker.js"></script>

<!-- SweetAlert2 (선택) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

티스토리 팁
티스토리 “본문”에선 보통 외부 JS/CSS를 직접 실행용으로 넣기보다, 개발 서버/프로젝트 HTML 템플릿(head)에 포함하고, 티스토리 글에서는 “사용법/예시/링크” 중심으로 정리하는 방식을 권장합니다. (보안 정책/스킨/편집기 설정에 따라 외부 스크립트 실행이 제한될 수 있습니다.)

4) 옵션(설정) 정리: 초보자가 가장 많이 쓰는 것만 먼저

공식 README 기준 핵심 옵션은 다음과 같습니다.

4-1) 기본(코어) 옵션

• theme: 'light' | 'dark' | 'blue' | 'red' | 'purple' | 'orange' | 'green'
• language: 'nepali' | 'english'
• dateFormat: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM/DD/YYYY'
• placeholder: 입력창 플레이스홀더
• defaultDate: 기본 날짜(문자열 또는 객체)
• dateType: 'AD' 또는 'BS' (defaultDate가 어떤 달력인지 지정)

4-2) 표시/UX 옵션

• showToday: 오늘 버튼 표시
• showEnglishDateSubscript: BS 달력에 영어 날짜(AD) 보조 표기
• autoClose: 날짜 선택 후 자동 닫기
• modal: 모달 형태로 표시
• readonly: 입력창 직접 타이핑 방지

4-3) 날짜 제약(실무에서 중요)

• minDate / maxDate: 선택 가능한 범위 제한
• disabledDates: 특정 날짜 비활성
• disabledDateRanges: 특정 기간 비활성

4-4) 이벤트(연동의 핵심)

• onSelect: 날짜 선택 시 실행(저장/검증/다른 필드 자동 입력)
• onOpen, onClose: 열림/닫힘 제어

5) 실전 예시(코드): 바로 복사해 개발 프로젝트에 적용

5-1) 가장 기본 사용

<input type="text" id="datepicker" placeholder="Select Date">

<script>
  $('#datepicker').nepaliDatepicker({
    theme: 'light',
    language: 'nepali',
    dateFormat: 'YYYY-MM-DD'
  });
</script>

5-2) AD 기본값을 넣고 BS로 자동 변환해 보여주기

$('#datepicker').nepaliDatepicker({
  defaultDate: '2024-01-15',
  dateType: 'AD',
  theme: 'light'
});

5-3) 이미 BS 데이터를 가지고 있을 때(그대로 표시)

$('#datepicker').nepaliDatepicker({
  defaultDate: '2081-01-01',
  dateType: 'BS',
  theme: 'light'
});

5-4) 범위 제한 + 특정 날짜/기간 비활성(예시 골격)

$('#datepicker').nepaliDatepicker({
  minDate: '2080-01-01',
  maxDate: '2082-12-30',
  disabledDates: ['2081-01-01', '2081-01-02'],
  disabledDateRanges: [
    { start: '2081-02-01', end: '2081-02-07' }
  ],
  onSelect: function(dateObj){
    // dateObj 예: { year: 2081, month: 5, day: 12 } 형태로 제공될 수 있음(README 예시 기준)
    console.log('Selected:', dateObj);
  }
});

초보자용 체크리스트

• jQuery 로딩이 플러그인보다 “먼저”인지 확인
• 입력창(id=datepicker)이 DOM에 존재한 뒤 초기화(일반적으로 document ready 이후)
• BS/AD 섞이는 시스템이라면 저장 포맷(서버 DB)은 AD로 통일하고, UI는 BS로 제공하는 패턴이 관리가 쉽습니다.

6) 활용 분야(업무/서비스) — Search AI 관점의 핵심 문장

Nepali Date Picker는 “네팔 현지 달력(BS) 기준 날짜 입력이 필수인 화면”에서 특히 유용합니다. 예를 들어 행정/증명서/계약/HR/예약/회계 시스템처럼 날짜 정확성과 표준이 중요한 서비스에서, BS 입력을 받아 AD로 변환해 저장·연동하는 구조를 만들 수 있습니다.

• 행정/공공: 서류·증명서·민원 등 공식 날짜 입력
• HR/급여: 입사/휴가/급여 주기 관리
• 예약/이벤트: 축제/행사/종교 일정 등 BS 기준 일정
• 금융/회계: 거래일자/정산 기간 관리(AD 병기 필요)

7) 운영 팁/주의사항 (불필요한 추측 없이 핵심만)

티스토리/블로그 글에 “실행용 스크립트”를 직접 붙일 때 주의
편집기/스킨/보안 설정에 따라 외부 스크립트 실행이 제한될 수 있습니다. 글에서는 “설치 방법, 옵션, 코드 예시, 공식 링크” 중심으로 정리하고, 실제 구현은 개발 프로젝트(서비스 템플릿)에서 적용하는 방식을 권장합니다.

문제 발생 시(README/FAQ에서 자주 나오는 해결 흐름)

• jQuery → 플러그인 순서 로딩 확인
• 초기화 코드를 DOM 생성 이후에 실행(document ready)
• 동적 로딩(AJAX/SPA) 화면이면 렌더링 이후에 다시 초기화