1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0.6 | V1.x | V1.x 版本文檔請參考：FVS日期時間元件歷史版本 |
| 11.0.16 | V2.0.1 | 元件新增內容樣式設定，詳情請參見 2.1.2 節 |
| 11.0.22 | V2.2.1 | 元件內容樣式新增快捷按鈕，可實現日期前一天（週/月/年）和 後一天（週/月/年）的效果；行動端還支援選擇不同樣式範本。詳情參見 2.1.2 節 |
| 11.0.22 | V2.8.0 | 元件名稱與參數分離，新增綁定參數邏輯，詳情參見 2.1.1 節 |
1.2 功能簡介
日期時間元件在範本預覽時，可選擇日期時間，支援透過參數聯動其他組件。效果如下圖所示：
組件動畫請參見：FVS組件動畫 。
組件樣式請參見：FVS組件樣式屬性 。元件名稱在「內容」中設定。
2. 功能介紹
2.1 元件內容
2.1.1 內容
日期時間元件可設定的內容如下圖所示：
各設定項的詳細介紹如下表所示：
| 設定項 | 詳細介紹 |
|---|---|
| 綁定參數 | 值為參數名稱，用於與參數綁定。預設為空，需根據實際參數進行設定 支援已有參數的綁定，也可以直接輸入新值以建立新的參數 |
| 格式 | 日期時間格式支援選擇 4 種類型，每種類型也分別支援選擇多種顯示樣式，同時支援手動輸入
例如手動刪除部分內容，僅顯示 yyyy ，可設定僅顯示年份：
|
| 預設值 | 可設定日期時間的預設值，有如下 3 種 1）自訂日期時間：預設取當天日期時間，顯示值與上方格式類型保持一致 可刪除後重新選擇，同時支援手動輸入
2）欄位：可選擇資料集中欄位，若回傳值為陣列，只取陣列序列中第一個值顯示
3）公式：點選右側 fx 輸入公式，若回傳值為陣列，只取陣列序列中第一個值顯示
|
| 回傳值 | 回傳值的格式，分為「日期」和「字串」兩種，一般需要跟資料庫表中日期欄位的類型匹配 |
| 水印 | 預覽時元件內顯示的淺灰色水印文字，以提示使用者需要輸入資訊，點選元件輸入正文後消失，預設為空 |
| 日期範圍 | 可設定開始日期和結束日期。開始日期必須小於結束日期 設定日期範圍後，不在範圍內的資料將變成灰色不可選取狀態 設定項包括以下 3 種： 1）無限制：不做限制 2）自訂：預設取當天日期時間，顯示值與上方格式類型保持一致。可刪除後重新選擇 3）公式：點選右側 fx 輸入公式，若回傳值為陣列，只取陣列序列中第一個值顯示 |
| 權限 | 設定頁面初始預覽時該元件是否可編輯，預設勾選可編輯 |
| 校驗 | 空值校驗：是否允許元件為空值，勾選後，允許元件為空值；不勾選，可設定校驗提示文字，範本預覽時若元件為空，則顯示提示文字。預設勾選 |
2.1.2 內容樣式
1）日期時間的格式不同，內容樣式有所不同。
注：V2.2.1 之前版本，僅支援設定元件文字字元樣式。
| 格式 | 說明 |
|---|---|
年-月-日 年-月 | 支援設定快捷按鈕，支援對元件值及快捷按鈕分別設定字元樣式
「元件文字」和「元件圖示」可以在範本主題樣式中設定，效果如下圖所示：
|
| 年-月-日-時-分-秒 時-分-秒 | 僅支援對「元件文字」設定字元樣式，例如字體、字號、顏色等等。
|
注1：樣式設定對下拉麪板中的字體無效，下拉麪板字元樣式僅受 FVS範本樣式 影響。
注2：修改字元顏色後，再設定 FVS範本樣式 ，字元顏色會跟隨主題變化，需重新設定。
2）當格式為「年-月-日」時，行動端 還支援選擇樣式範本。其他三種格式，行動端設定項和 PC端一致。
| 樣式範本 | 說明 |
|---|---|
| 預設樣式 | 和PC端一致，支援設定快捷按鈕，支援對元件值及快捷按鈕分別設定字元樣式
|
| 普通日曆 | 支援設定快捷按鈕，字元樣式以及日曆效果
|
| 週檢視表日曆 | 無快捷按鈕設定，支援設定字元樣式以及日曆效果
|
注：「普通日曆」和「週檢視表日曆」建議開啟 行動端佈局 使用，未開啟行動端佈局時，日曆展開的可見範圍由組件大小決定。
2.2 元件交互事件
點選「交互>新增事件」，可新增 JavaScript 事件實現更多效果。日期時間元件支援「初始化後事件」和「編輯結束事件」。如下圖所示：
點選具體的某一個事件，會彈出 JavaScript 事件設定框。如下圖所示：
注：關於 FVS 支援的 JavaScript 可參考文檔 FVS支援的JSAPI場景 。
3. 範例
3.1 準備範本
1）點選設計器左上角「檔案>建立視覺化看板」。
2）建立資料庫查詢 ds1 ，輸入如下 SQL 查詢語句：
SELECT * FROM 訂單 where 1=1
${if(len(starttime)=0,""," and 訂購日期>='"+starttime+"'")}
${if(len(endtime)=0,""," and 訂購日期<='"+endtime+"'")}
表示獲取訂單資料表中，訂購日期在 starttime（起始時間）和 endtime（結束時間）範圍內的資料。
如下圖所示：
3.2 新增標題組件
點選組件區「文字>標題組件」，新增到頁面中。在右側配置面板中設定標題內容為「起始時間」，再複製一個標題設定內容為「結束時間」。如下圖所示：
3.3 新增日期時間元件
點選組件區「元件>日期時間」，新增到頁面中。
在右側配置區，設定綁定參數為 starttime ，與資料集參數 starttime 相匹配。預設值自訂日期時間選擇 2011-05-22 。
再複製一個日期時間元件，綁定參數為 endtime ，與資料集參數 endtime 相匹配。預設值自訂日期時間選擇 2011-06-22 。
步驟如下圖所示：
3.4 新增折線圖組件
1）點選組件區「圖表>折線圖」，新增到頁面中，給折線圖綁定資料如下圖所示：
2）選中折線圖，點選「內容>樣式>坐標軸」，將 X軸 的類型設定為「時間坐標軸」。
3.5 效果預覽
3.5.1 PC 端
點選右上角「儲存」，點選「預覽」，修改起始時間或結束時間後，折線圖則顯示對應時間範圍內的資料。效果如 1.2 節所示。
3.5.2 行動端
預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
