日期區(qū)間

1. 適用場景

需要選擇兩個日期的場景，例如請假、 出差時間、辦理業(yè)務(wù)時間等適用。

2. 基礎(chǔ)功能

2.1 日期格式

可以設(shè)置日期的顯示格式

路徑：組件 >> 屬性 >> 顯示格式

當(dāng)選擇了格式為年-月-日時，展示效果如下（其他格式同理）：

2.2 設(shè)置固定時間（默認(rèn)值）

可以給日期區(qū)間設(shè)置一個固定的值，設(shè)置了默認(rèn)值后，日期區(qū)間組件會直接展示我們設(shè)置的默認(rèn)值。（設(shè)置了默認(rèn)值后，也可手動選擇日期）。

路徑：屬性 >> 默認(rèn)值

設(shè)置默認(rèn)值時，默認(rèn)格式為「年-月-日 00:00:00」，但組件實際的顯示是以設(shè)置的「顯示格式」為準(zhǔn)的。

效果展示如下：

當(dāng)我們設(shè)置的格式為年-月-日

實際顯示的日期格式如圖所示：

3. 高級用法

3.1 計算日期差值

我們可以計算在日期區(qū)間里所選的兩個日期之間的差值，填充到數(shù)值組件中。

3.1.1配置方法

1）在表單/流程表單的表單設(shè)計頁面，拖動一個日期區(qū)間組件和一個數(shù)值組件。

2）點擊數(shù)值組件后，左側(cè)默認(rèn)值的地方選擇公式編輯

3）點擊編輯公式 >> 進去選擇時間函數(shù) >> 選擇 CASCADEDATEINTERVALV2 函數(shù)，具體配置請參考下圖：

4）效果展示如下：

關(guān)于該函數(shù)的具體用法，可以參考以下文檔：

此處為語雀內(nèi)容卡片，點擊鏈接查看：

3.2 禁用日期函數(shù)

通過自定義函數(shù)，可以設(shè)置日期區(qū)間的可選范圍（與日期組件的自定義設(shè)置類似），適用于預(yù)約等場景。

路徑： 屬性 >> 禁用日期函數(shù) >> 綁定動作

3.2.1 禁用日期函數(shù)的配置方法及示例場景

如果想設(shè)置 2021-04-16 到 2021-04-30 之間的日期不可選中，可參考如下設(shè)置：

點擊綁定動作 >> 選擇頁面 JS >> 點擊添加新動作 >> 點擊確定

點擊確定后，會出現(xiàn)以下界面，參考以下路徑：

以下代碼可以參考使用（可復(fù)制）：

export function disabledDate(current) {
  // 判斷日期在 2021-02-11 和 2021-02-17 之間
  if (current >= new Date('2021-02-11 00:00:00') && current < new Date('2021-02-18 00:00:00')) {
    // 返回 true 表示禁用
    return true;
  }
  return false;
}

代碼復(fù)制截圖的一段即可：

配置好了后，點擊保存，那么 4 月16~4月30 之間的日期就不可選中了，效果展示如下：

4. 常見問題

4.1 為什么修改日期時，時間被重置了？

當(dāng)我們選擇格式為 「年-月-日-時-分」或者「年-月-日-時-分-秒」，屬性面板下面會出現(xiàn)一個「每次選擇日期是否重置時間」的功能，如圖所示：

該功能默認(rèn)是關(guān)閉的，也就是說在該功能關(guān)閉狀態(tài)下，每次修改日期時，「時-分」 會保持原來的時間，但是如果打開這個按鈕，則每次重新修改了日期,「時-分」 會被重置到「00:00」。

該功能與日期組件的顯示格式常見問題一致，詳情請參考鏈接 日期組件，點擊日期格式常見問題即可查看。