# 时间选择器
时间选择器是文本组件的一种，用于选择时间。
在大屏设计页面，从"全部组件 \> 文本"中，拖拽"时间选择器"组件至画布空白区域，如[图1]。
图1时间选择器   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424697.png "点击放大")
图2边距样式说明   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184108.png)
#### 卡片
卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。
图3时间选择器卡片   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184692.png "点击放大")
- 背景
  - 背景色：设置组件卡片的背景颜色。
  
  - 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。
  
  - 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。
  
  - 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。
   
- 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。
- 边距：组件中图表距离整个组件四边（上、下、左、右，如[图2]）的距离，默认为0，即铺满整个组件。
 
#### 配置
在配置中，设置时间选择器的类型、输入框和弹出框的字体颜色等。
图4时间选择器配置   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306297.png "点击放大")
- 时间选择器的类型
  - 选择器类型：支持时间范围和瞬时两种。
  
  - 快捷时间：是否显示快捷时间，默认为"显示"。"选择器类型"设置为"时间范围"时，才显示该参数。
    图5显示快捷时间效果   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184708.png) 
  
  - 值类型：支持实时和固定时间两种类型。选择实时，快捷时间为now形式，如[图6]。
    图6值类型为实时   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424689.png) 
  
  - 快捷时间字体颜色：设置快捷时间的字体颜色。
  
  - 选中字体颜色：设置选中快捷时间时，快捷时间字体的颜色。
  
  - 选中背景颜色：设置选中快捷时间时，快捷时间背景的颜色。
   
- 输入框设置
  下方输入框的设置，对时间选择器组件中所有输入框生效。
  - 字体：设置输入框中文字的字体、大小和颜色等。
  
  - 背景颜色：设置输入框的背景颜色。
  
  - 边框颜色：设置输入框边框的颜色。
  
  - 边框聚焦颜色：当鼠标单击或键盘操作将焦点置于时间选择器组件上时，边框所呈现的颜色。
  
  - 边框悬浮颜色：当鼠标指针悬停在时间选择器组件上时，组件边框所呈现的颜色。
  
  - 分隔符：开始时间和结束时间之间的分隔符。
  
  - 开始时间占位符：开始时间输入框中没有选择具体时间时，显示的文字内容。
    图7删除静态数据中数据时显示的效果   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184688.png) 
  
  - 结束时间占位符：结束时间输入框中没有选择具体时间时，显示的文字内容。
    
- 弹出框设置
  下方弹出框的设置，对时间选择器组件中所有弹出框生效。
  - 放大倍数：组件发布后，时间弹出框在页面占位相对于开发态中放大的倍数。在大屏页面中，放大倍数建议设置大一些。
  
  - 背景颜色：时间弹出框背景的颜色。
  
  - 字体颜色：时间弹出框中时间的颜色。
  
  - 悬浮字体颜色：鼠标指针悬停在时间弹出框上，显示的字体颜色。
  
  - 选中字体颜色：时间弹出框中，选中状态时间的字体颜色。
  
  - 选中背景颜色：时间弹出框中，选中状态时间的背景颜色。
  
  - 分割线颜色：时间弹出框中分割线的颜色。
    图8分割线颜色   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306305.png) 
  
  - 前月后月的日期颜色：时间弹出框中，上个月日期和下个月日期的日期颜色。
    图9前月后月的日期颜色   
    ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184696.png) 
    
 
#### 数据
在数据中，设置时间选择器组件的数据来源，更多介绍请参见[数据接入](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6143.html)。
#### 交互
在交互中，配置时间选择器组件与其他组件或页面之间的交互能力。更多交互介绍，请参见[交互设置](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6140.html)。