datepicker 예제

jQueryUI의 날짜 선택기를 사용하면 사용자가 쉽고 시각적으로 날짜를 입력 할 수 있습니다. 날짜 형식과 언어를 사용자 지정하고, 선택 가능한 날짜 범위를 제한하고, 단추 및 기타 탐색 옵션을 쉽게 추가할 수 있습니다. 위의 예에서 첫 번째 입력에 대한 메이트 날짜가 yy-mm-dd로 설정된 것을 볼 수 있습니다. 날짜 선택기에서 일부 날짜를 선택하면 날짜 형식이 “DD, d MM, yy”로 설정된 두 번째 입력 필드에 동일한 날짜가 반영됩니다. 이 옵션은 변경연도가 true인 경우(부터)의 양식에 드롭다운에 표시되는 연도 제한을 지정합니다. 값은 절대 또는 상대적일 수 있습니다(예: 2005:+2, 2005년~2년 후). 접두사 c는 현재 연도가 아닌 선택한 연도에서 상대 값을 오프셋하는 데 사용할 수 있습니다(예: c-2:c+3). 기본적으로 해당 값은 c-10:c+10입니다. 날짜 선택기는 특정 날짜를 선택하는 데 적합하지만 때로는 그 이상이 필요합니다 . 시작 날짜와 종료 날짜를 설정하려면 시작 날짜 이전의 시간으로 설정된 종료 날짜가 의미가 없기 때문에 두 Pickers 간의 협력이 필요합니다. 다행히도 두 개의 날짜 선택기를 함께 묶을 수 있습니다 (입력, 최소 및 최대 속성, 정확 하 게). 우리는 getters 및 setters를 사용하여 그것을 달성하고 여기에 방법입니다 : 우리의 예에서 사용자가 입력 필드를 클릭하거나 탭 키를 사용하여 입력 필드에 초점을 맞출 때 jQuery 코드 팝업 캘린더 아래에서 날짜를 선택하기 위해 양식의 다른 필드는 사용자가 원하는 날짜 형식을 선택할 수 있게합니다.

위의 예제에서는

요소를 사용하여 인라인 날짜 선택기를 가져옵니다. 위의 예에서 일의 이름은 dayNamesMin을 사용하여 변경됩니다. 기본 날짜가 설정된 것을 볼 수도 있습니다. 위의 예에서 showWeek가 true로 설정된 것처럼 날짜 선택기의 왼쪽에 주 번호가 표시되는 것을 볼 수 있습니다. 올해는 “-CE”의 접미사가 있습니다. 위의 예에서 월 및 연도 필드에 대한 드롭다운 메뉴를 볼 수 있습니다. 그리고 우리는 [2,2]의 배열 구조에서 4 개월 을 이질적입니다. 위의 예에서 prev 및 nect 링크에는 캡션이 있습니다.

요소를 클릭하면 날짜 선택기가 열립니다. 이제 첫 번째 날짜 선택기에서 다른 달 날짜는 selectOtherMonths가 false로 설정됨에 따라 비활성화됩니다. 두 번째 입력 유형에 대한 두 번째 날짜 선택기에서 selectOtherMonths는 true로 설정됩니다. 위의 예에서 일요일과 토요일은 사용할 수 없습니다. 위의 예제에서는 날짜 선택기를 열려면 b를 클릭해야 하는 아이콘이 표시됩니다. . 이 옵션은 showOn 옵션을 단추 중 하나 또는 둘 다로 설정하여 활성화된 단추에 표시할 이미지경로를 지정합니다. buttonText도 제공된 경우 단추 텍스트는 단추의 alt 특성이 됩니다.

기본적으로 해당 값은 “”입니다.

Por
agosto 2, 2019