Flatpickr을 사용하여 미니멀리스트 Datetime 입력 선택 만들기

가장 까다로운 분야 중 하나는 날짜 / 시간 선택. 개발자는 종종 월 / 일 / 년을위한 간단한 선택 메뉴에 의지하거나 다양한 플러그인을 사용하여 작업을 수행합니다.

선택 필드는 정상적으로 작동하지만 조금 어색해합니다. 대신 양식을 사용하여 Flatpickr 플러그인. 그것은 0 의존성이없는 무료 오픈 소스 자바 스크립트 캘린더 피커.

그것은 미니멀리즘을 염두에두고 디자인되었습니다., 그래서 어떤 웹 사이트 레이아웃, 어떤 웹 폼에도 들어갈 수 있으며, 모든 현대 장치에서 사용할 수 있어야합니다..

이 플러그인에 대한 좋은 점 중 하나는 다양한 사용자 정의 옵션. 텍스트 필드에 날짜가 나타나는 방식과 달력이 시작되는 위치를 재 스타일링 할 수 있습니다 (기본값은 on “오늘”).

하지만, 당신은 또한 엄밀히 말하면 날짜 선택 도구로 사용하십시오. 시간 선택의 필요성이 없다면 이 선택기로 양식을 통해 더 많은 데이터를 전달할 수있는 선택 기능입니다..

살펴보기 예제 페이지 Flatpickr의 실제 모습보기.

당신은 또한 수 타겟 옵션 설정 다음과 같이 날짜 선택 도구의 동작을 제한합니다.

옵션은 사실상 끝이 없으며이 바닐라 자바 스크립트 플러그인을 통해 모두 작동합니다..

모바일 사용자는 종종 기본 날짜 선택 도구를 선호하지만 자바 스크립트에서이 설정을 모바일 설정으로 재정의하십시오.. 이렇게하면 모든 기기에서 동일한 인터페이스를 사용할 수 있습니다..

그리고, 당신은 심지어 polyfill로 IE9 지원 추가 이 기능은 가장 잘 지원되는 날짜 선택 도구 플러그인 중 하나입니다..

설치는 간단합니다. npm, Bower 및 Yarn 명령. 또는 소스 파일을 다운로드 할 수 있습니다. 직접 GitHub에서 당신이 그 길을 선호한다면.

필요한 모든 정보는 설정 페이지에서 확인할 수 있습니다. 헤더에 파일을 추가하는 방법 & 어떤 날짜에이 날짜 선택기를 호출하는 방법. 쉽게 모든 디자인에 맞게 설계된 최고의 날짜 선택기 플러그인 중 하나.