DeskyCalendar로 날짜 선택 향상: 바닐라 JS 솔루션

간단함 없이 폼을 향상시키고 싶으십니까? 순수한 바닐라 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 Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
결론

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

위 내용은 DeskyCalendar로 날짜 선택 향상: 바닐라 JS 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!