# 시간 선택기

## Content


기본으로 제공하는 날짜  셀타입 보다 아름다운 디자인을 가진 Element UI의 날짜선택기를 사용할 수 있습니다. 

기본으로 제공하는 날짜셀타입과 비교하면 아래와 같은 장점과 제약사항이 있습니다.

### 장점 

* 현대적인 UI 스타일 
* 선택기 모드 지원 
* 선택 시간 범위 지원
* 아이콘 지원 
* 모든 텍스트를 지우는 기능 제공 

### 제약사항

* 리스트뷰에서 사용이 가능하지 않음
* 포커스를 받을 때 모든 텍스트 선택을 지원하지 않음
* 스타일 템플릿을 지원하지 않음
* Excel을 지원하지 않음
* 버튼 가시성을 지원하지 않음



### 빌더화면 

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4e3bfc58-e2a1-41a1-ac75-a0e383260d93/image-749.png)



### 실행화면 

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4e3bfc58-e2a1-41a1-ac75-a0e383260d93/image-1219.png)



### 옵션 

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4e3bfc58-e2a1-41a1-ac75-a0e383260d93/image-640.png)

| 이름 | 설명 |
| --- | --- |
| 명령 편집 | 값이 변경될 때 실행할 명령 구성 |
| 데이터 유효성 검증 | 셀의 구성 데이터 유효성 검사, 업데이트 명령 실행 또는 요청 서버 명령 실행 시에만 유효성 검사 |
| UI 권한 편집 | 현재 사용자의 역할에 따라 표시/편집 가능/활성화 권한 |
| 기본값 | 기본값 |
| 시작 시간 | 시작 시간 |
| 종료 시간 | 종료 시간 |
| 시간 선택 방식 | <p>시분초 선택모드</p><h2 id="timepicker"><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931196380/image2022-2-17_9-0-12.png?version=1&#x26;modificationDate=1645059612523&#x26;cacheVersion=1&#x26;api=v2&#x26;width=247&#x26;height=250" alt=""></h2><p><br>설정시간 선택모드<br><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931196380/image2022-2-17_10-40-35.png?version=1&#x26;modificationDate=1645065635727&#x26;cacheVersion=1&#x26;api=v2&#x26;width=250&#x26;height=250" alt=""></p> |
| 시간을 범위로 설정 | <p>선택모드일 때만 사용 가능<br><img src="/assets/image-620.png" alt=""></p> |
| 시작 시간 입력 안내 | <p>시간표시유형이 시간 시간범위인  경우에만 사용할 수 있습니다.<br>시작시간 입력란에 시간를 입력하기 전에 입력되어 있는 안내 문구</p> |
| 종료 시간 입력 안내 | <p>시간표시유형이 시간 시간범위인  경우에만 사용할 수 있습니다.<br>종료시간 입력란에 시간를 입력하기 전에 입력되어 있는 안내 문구</p> |
| 범위 구분 표현 | 범위 구분 표현을 나타낸다. 기본값을 "부터"이다. |
| 앞쪽 표시 아이콘 | ![](https://grapecity.atlassian.net/wiki/download/thumbnails/2931196257/image2022-2-17_11-33-11.png?version=1\&modificationDate=1645068791150\&cacheVersion=1\&api=v2\&width=277\&height=53) |
| 선택 후 지우기 버튼 표시 | ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4e3bfc58-e2a1-41a1-ac75-a0e383260d93/image-644.png) |
| 직접 입력 허용 | 입력 또는 선택만 가능 |
| 읽기 전용 | <p>읽기 전용<br></p> |
| 비활성화 | ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4e3bfc58-e2a1-41a1-ac75-a0e383260d93/image-2047.png) |

### 관련 명령 빠른 생성 

| 이름 | 설명 |
| --- | --- |
| 범위 설정 값 가져오기 | <p>시간을 범위로 설정하였을 경우에만 사용할 수 있습니다.<br>사용자는 범위를 선택하고 이 작업을 사용하여 선택한 범위의 시작 및 끝 값을 가져온 다음 데이터베이스 또는 쿼리 데이터를 쿼리 조건으로 저장할 수 있습니다.</p> |