간단함 없이 폼을 향상시키고 싶으십니까? 순수한 바닐라 JavaScript로 제작된 미니멀하고 반응성이 뛰어난 날짜 선택기인 DeskyCalendar를 만나보세요. 프로젝트에 부담을 주지 않고 날짜 선택 프로세스에 스타일과 기능을 추가하도록 설계되었습니다.

데모 및 프로젝트 페이지

데모 페이지 -> https://danruggi.github.io/datepicker/
프로젝트 링크 -> https://github.com/danruggi/datepicker

주요 특징

? 완전 반응형: 어떤 기기에서나 멋지게 보입니다. 더 이상 달력이 찌그러지지 않습니다.
? 이중/단일 형식: 단일 날짜 또는 범위를 쉽게 선택하세요.
? "모든 날짜" 옵션 추가: 사용자가 원하는 날짜를 자유롭게 선택할 수 있으므로 필터 및 보고서에 적합합니다.
? 날짜 비활성화: 과거 또는 미래 날짜에 대한 선택을 방지하고 모든 것을 확인합니다.
? 클릭 시 외부 기능 실행: 날짜를 선택할 때 사용자 지정 작업을 실행하고 싶으십니까? 진정하세요!
빠른 설정

1. CSS와 JS를 포함하세요

다음 링크를 HTML에 추가하세요.

2. 입력 내용 추가

입력 필드 생성:

3. 캘린더 초기화

간단한 JavaScript 라인으로 설정하세요:

new DeskyCalendar({'myID': {}});

최소한의 예

두 개의 열

이중 날짜 선택으로 쉽게 전환:

new DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

날짜 비활성화

날짜를 제한하고 싶으신가요? 그냥 추가하세요

const d = 새 날짜();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
결론

단 몇 줄만으로 DeskyCalendar는 가볍고 효율적이면서 날짜 선택 요구 사항에 정교함과 단순성을 제공합니다. 이제 이 우아한 솔루션으로 양식의 수준을 높일 시간입니다. 즐거운 코딩하세요!