날짜 선택기

날짜 선택 구성요소를 사용하여 날짜를 시각적으로 표현하고 양식에 표시하고 드롭다운 또는 대화 상자에서 선택하기 위한 적절한 수단을 제공합니다. 날짜 선택기는 Ignite UI for Angular와 시각적으로 동일합니다.

Date Picker Demo

Date Picker Input

날짜 선택 필드를 표시하기 위해 양식에 날짜 선택기 입력을 삽입할 수 있습니다. 활성화 및 비활성화 대화형 상태뿐만 아니라 사용자 상호 작용 시 표시되는 대화 상자 및 드롭다운의 변형도 지원합니다.

Picker Layout

날짜 선택기는 가로 및 세로 방향의 대화 상자 레이아웃과 날짜 선택의 다양한 모드를 용이하게 하는 드롭다운 레이아웃을 지원하고 서로 더 쉽게 구별할 수 있도록 다양한 그림자를 표시합니다. 대화 상자 레이아웃에는 부울 Header 속성을 꺼서 Figma에서 숨길 수 있는 헤더가 함께 제공되며 레이아웃은 추가된 자동 레이아웃 덕분에 그에 따라 자동으로 조정됩니다. Sketch 에서는 헤더의 재정의를 ~No Symbol로 설정하여 이를 달성할 수 있으며, 스마트 레이아웃을 사용하면 모든 것이 그에 따라 조정됩니다. Adobe XD에서는 헤더 레이어를 삭제해야 하며 스택을 사용하여 레이아웃이 조정됩니다.

Week Start

우리는 주의 첫날인 일요일과 월요일에 대해 가장 일반적인 두 가지 시나리오를 지원합니다. Figma 에서는 Week Start 속성에서 한 주의 시작을 선택할 수 있습니다. Sketch 및 Adobe XD에서는 날짜 선택기를 삽입할 때 시작일을 옵션으로 선택해야 합니다.

Week Numbers

날짜 선택기에는 달력과 동일한 주 번호 지원 기능이 내장되어 있습니다. UI의 이 부분을 표시하지 않으려면 Figma에서 부울 Week Numbers 속성을 끄면 추가된 자동 레이아웃 덕분에 레이아웃이 그에 따라 자동으로 조정됩니다. Sketch 에서는 Week Numbers 재정의를 ~No Symbol로 설정하여 이를 달성할 수 있으며 스마트 레이아웃을 사용하면 모든 것이 그에 따라 조정됩니다. Adobe XD에서는 동일한 결과를 얻으려면 Week Numbers 레이어를 삭제해야 하며 거기에 사용된 스택은 비슷한 방식으로 레이아웃을 조정합니다.

Selection

달력과 유사하게 날짜 선택기를 사용하면 세 가지 선택 모드 중에서 선택할 수 있습니다. 단일 날짜는 사용자가 한 날짜만 선택할 수 있도록 제한하고, 다중 날짜는 임의의 날짜를 선택할 수 있으며, 범위는 시작 날짜와 시작 날짜 사이의 모든 날짜를 선택하는 것을 의미합니다. 종료일.

스타일링

날짜 선택기는 헤더 배경 및 제목 색상은 물론 선택한 날짜, 현재 날짜 등에 대한 텍스트 색상에 대한 다양한 옵션을 통해 스타일링 유연성을 제공합니다.

Usage

수평 및 수직 대화 상자 날짜 선택기를 UI의 나머지 부분을 흐리게 하는 대화 상자로 표시합니다.

하다	하지 않다