日期

1. 適用場(chǎng)景

需要選擇日期或時(shí)間時(shí)，適用于加班、出差等場(chǎng)景。

https://www.yuque.com/yida/support/snftao

2. 基礎(chǔ)功能

可設(shè)置日期默認(rèn)值、日期格式、一鍵清除、日期區(qū)間、高級(jí)功能自定義區(qū)間。

2.1 設(shè)置固定時(shí)間和日期格式

2.1.1 默認(rèn)值（固定時(shí)間）

日期組件支持默認(rèn)值，設(shè)置后，在表單提交時(shí)，固定展示該默認(rèn)值（設(shè)置了默認(rèn)值后，也可手動(dòng)選擇日期）。

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

注：默認(rèn)值顯示的是「年-月-日」，但實(shí)際在組件里面顯示的內(nèi)容，是以我們?cè)O(shè)置的具體格式為準(zhǔn)。

效果如圖：

日期默認(rèn)值

2.1.2 日期格式

日期默認(rèn)格式是：「年-月-日」，也可以自定義日期格式。

效果如圖：

日期格式

2.2 可選時(shí)間區(qū)間

我們可以對(duì)選擇的時(shí)間做出限制，適用于請(qǐng)假、加班等場(chǎng)景。

效果如圖：

可選時(shí)間區(qū)間

2.2.1 時(shí)間區(qū)間場(chǎng)景展示

如果我們要限制只能請(qǐng)今天之后的假，我們可以設(shè)置時(shí)間區(qū)間為「可選今天之后（含今天）」，設(shè)置后，今天之前的日期會(huì)變成灰色, 變?yōu)椴豢蛇x狀態(tài)，其他區(qū)間同理 。

效果如圖：

2.2.2 高級(jí)功能自定義區(qū)間配置及場(chǎng)景

可以通過寫 JS 的方式，實(shí)現(xiàn)只能選擇指定時(shí)間段內(nèi)的時(shí)間，適用于預(yù)約、處理特殊業(yè)務(wù)等場(chǎng)景。

路徑：屬性 >> 可選時(shí)間區(qū)間 >> 選擇自定義 >> 綁定動(dòng)作

綁定動(dòng)作

我們可以綁定一個(gè)自定義動(dòng)作, 固定允許選擇的時(shí)間范圍，示例動(dòng)作如下 (只能選擇 7 天之內(nèi)的日期)。

具體配置如下：

1）點(diǎn)擊綁定動(dòng)作后，會(huì)出現(xiàn)以下界面，參考截圖的步驟。

2）點(diǎn)擊確定后會(huì)出現(xiàn)一下界面，參考截圖的步驟：

3）刪除后，可以把下面的代碼復(fù)制到 JS 界面，然后點(diǎn)擊保存，參考截圖的步驟：

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

 export function disabledDate(current) {
   // 判斷是未來7天（不包含當(dāng)天）的日期
   if (current < Date.now() + 24 * 3600 * 1000 * 7 && current >Date.now()) {
     // 這里返回 false 代表不執(zhí)行disable邏輯，可被選擇
     return false;
   }
   // 這里返回 true 代表執(zhí)行disable邏輯，不可被選擇
   return true; 
}

配置好了之后，只能選擇七天內(nèi)的時(shí)間，效果如圖：

2.3 清除按鈕

開啟了清除按鈕后，若選中的時(shí)間有誤，可以點(diǎn)擊 × ，一鍵清除，效果如圖：

3. 常見問題

3.1 為什么修改了日期后，時(shí)間被重置了？

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

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

效果如下 ：

3.2 如何把兩個(gè)日期組件之間的差值轉(zhuǎn)化為小時(shí) ？

請(qǐng)參考以下設(shè)置

3.3 在單行文本內(nèi)輸入周幾，下面的日期組件就需要顯示這個(gè)周幾是本周的幾號(hào) ？

用零代碼暫時(shí)實(shí)現(xiàn)不了這個(gè)功能，可以通過公式獲取到當(dāng)前日期，在使用 JS 判斷目標(biāo)星期與當(dāng)前日期做差，計(jì)算兩者相差多少天，再使用 JS 判斷目標(biāo)星期是多少號(hào)即可。

3.4 表單上添加一個(gè)日期區(qū)間的組件，第一個(gè)時(shí)間選擇 12 號(hào) 4 點(diǎn)，第二個(gè)想要選擇12 號(hào) 4 點(diǎn)以后的時(shí)間，但是現(xiàn)在第二個(gè)只能從 13 號(hào)開始選擇，目前只能是以天為維度的，我希望可以以小時(shí)為維度，是否可以支持 ？

目前日期區(qū)間組件只能精確匹配到天，辛苦提交需求。

3.5 怎么計(jì)算兩個(gè)日期相隔幾天幾小時(shí)幾分鐘？

請(qǐng)查看 這篇文檔 詳細(xì)操作說明。

3.6 實(shí)現(xiàn)時(shí)鐘秒數(shù)走動(dòng)的一種效果

您好，這個(gè)可以使用 JS 代碼實(shí)現(xiàn)，在表單內(nèi)添加一個(gè)日期組件，然后復(fù)制下面的代碼到 didMount() 方法里面，默認(rèn)就會(huì)加載出來

注意：下面的唯一標(biāo)識(shí)需要是日期組件的唯一標(biāo)識(shí)

 setInterval( function(){ 
var dt = new Date(); 
var y = dt.getFullYear(); 
var M = dt.getMonth()+ 1; 
var d = dt.getDate(); 
var h = dt.getHours(); 
var m = dt.getMinutes(); 
var s = dt.getSeconds(); 
//alert("當(dāng)前時(shí)間：" + y + "年"+M+"月"+d +"日"+ h + "時(shí)" + m + "分" + s + "秒");
 document.getElementById( "唯一標(biāo)識(shí)").innerHTML = "當(dāng)前時(shí)間：" + y + "年" + M + "月" + d + "日" + h + "時(shí)" + m + "分" + s + "秒"
 }, 1000); 

JS 面板

最終效果：

3.7 如何根據(jù)字段值發(fā)生變化實(shí)時(shí)更新日期組件值為當(dāng)前時(shí)間？

在值發(fā)生變化的字段上面新建動(dòng)作 >> 值發(fā)生變化時(shí)

復(fù)制以下代碼

export function onChange({ value }) {
  this.$('日期組件唯一標(biāo)識(shí)').setValue(Date.parse(new Date()))
}