flatpickr 예제

| 0

Flatpickr는 사용자에게 날짜, 시간 또는 날짜 범위를 쉽게 선택할 수있는 방법을 제공하는 유연하고 세련된 캘린더 위젯입니다. 대체 입력의 형식을 변경하려면 데이터 대체 형식 특성을 사용합니다. Flatpickr 문서에서 유효한 서식 지정 토큰 목록을 찾습니다. 기본값이 있는 옵션의 전체 목록은 Flatpickr 문서에서 찾을 수 있습니다. 예제 페이지를 살펴보고 플랫피커의 동작을 확인합니다. 데이터 대체 입력 옵션은 원래 입력을 숨기고 읽기 쉬운 날짜 형식으로 새 입력을 만듭니다. 원래 입력의 값은 Flatpickr에 의해 업데이트되고 서버로 전송됩니다. 달리 명시되지 않는 한 아래 예제의 태그는 입력 요소와 지정된 구성을 가진 flatpickr 호출로 구성됩니다. 위의 예제에 추가하면 데이터 사용 시간 옵션은 날짜를 선택한 경우 캘린더 위젯에 시간 선택기를 표시합니다. 이러한 유연성을 통해 임의의 논리를 사용하여 날짜를 비활성화할 수 있습니다. 아래 예제는 토요일과 일요일을 사용하지 않도록 설정합니다.

플랫 피커는 사용자가 수동으로 날짜 입력을 입력 할 때 이벤트를 노출해야한다고 생각합니다. 이 경우 흐림 이벤트가 합리적인 옵션이 될 수 있습니다. 이렇게 하면 모든 키 스트로크에 대해 발생 문제가 발생하지 않으며 양식 제출을 위해 입력을 입력할 필요가 없는 응용 프로그램에 대한 사용자 의도를 캡처하는 것처럼 보입니다. 다음은 제안 된 onBlur 후크와 바이올린의 예입니다 : https://jsfiddle.net/pjd62va5/ 데이터 특성은 Flatpickr 설명서에있는 기본 옵션에 다른 형식을 따릅니다 – 모든 데이터 속성은 데이터로 시작하고 옵션은 모두 소문자입니다. 단어 사이의 하이픈입니다. 가장 기본적인 형태로 Flatpickr를 사용하려면 입력 요소에 데이터 플랫 피커를 추가합니다. 입력 값이 비어 있고 입력 요소를 클릭할 때 선택자가 나타납니다. 자리 표시자를 추가하면 입력을 클릭하도록 사용자에게 표시하는 것이 좋습니다. 선택 필드는 잘 작동하지만 약간 어설프습니다. 대신, 플랫 피커 플러그인으로 양식을 재즈 할 수 있습니다. 그것은 제로 종속성무료 오픈 소스 자바 스크립트 달력 선택기입니다.

날짜 선택기는 페이지 로드의 데이터 속성에 의해 초기화됩니다. 옵션은 데이터 속성을 통해 Flatpickr 라이브러리에 제공됩니다. 플랫 피커는 달력을 표시하지 않고 시간 선택기로 작동 할 수 있습니다. 옵션은 입력 요소의 데이터 특성을 통해 Flatpickr에 제공됩니다. 데이터 속성을 통해 추가 옵션을 추가하면 Flatpickr의 유연성이 향상됩니다. 날짜 입력을 완료한 후 enter를 눌러야 합니다. 바이올린을 확인하고 입력을 누른 후 잘 작동합니다. 내 사용자가 이미 그 유연성을 가지고 jquery-ui datepicker, 슬프게도 jquery-ui vuejs 환경에서 사용하기 쉽지 않기 때문에 나는 또한 그 기능이 필요합니다. 나는 @aliniacb @chmln이 요구를 수용하기 위해 고려 바랍니다. 감사. 날짜 문자열 서식 지정 및 날짜 범위 설정과 같은 고급 옵션을 계속 읽으세요.

https://demos.shieldui.com/web/datepicker/basic-usage 날짜를 선택하면 원래 입력에는 Y-m-d가 포함됩니다. altInput은 날짜를 보다 읽기 읽기 쉬운 사용자 정의 형식으로 표시합니다. flatpickr는 부트 스트랩 및 기타 프레임 워크에서 일반적인 텍스트 상자와 단추의 입력 그룹을 구문 분석 할 수 있습니다.

Follow admin:

Latest posts from