# 시간 선택기

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

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

### 장점 

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

### 제약사항

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

### 빌더화면 

<figure><img src="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/9NapAOVWgwh442k5HE9c/image.png" alt=""><figcaption></figcaption></figure>

### 실행화면&#x20;

<figure><img src="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/DO7gEf2emm0j9VU9bPid/image.png" alt=""><figcaption></figcaption></figure>

### 옵션&#x20;

<figure><img src="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/723UKxUufJML4yThHSFI/image.png" alt=""><figcaption></figcaption></figure>

| 이름             | 설명                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 명령 편집          | 값이 변경될 때 실행할 명령 구성                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| 데이터 유효성 검증     | 셀의 구성 데이터 유효성 검사, 업데이트 명령 실행 또는 요청 서버 명령 실행 시에만 유효성 검사                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| 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="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/yLqrRGFjtIBIdAJJ4V3i/image.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://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/WCb2Eb6LlNUhMyQi6Hib/image.png)                                                                                                                                                                                                                                                                                                                                                                                                                           |
| 직접 입력 허용       | 입력 또는 선택만 가능                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| 읽기 전용          | <p>읽기 전용<br></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| 비활성화           | ![](https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/wFuwXfRfhQvLAaxi3wBa/image.png)                                                                                                                                                                                                                                                                                                                                                                                                                           |

### 관련 명령 빠른 생성&#x20;

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