iT邦幫忙

2022 iThome 鐵人賽

DAY 8
1
自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列 第 8

Day08:Ant Design 表單裡的日期選擇框

  • 分享至 

  • xImage
  •  

網頁開發上常見的輸入欄真的很多類型,最基本的文字輸入框,其實也可以藉由 type 這個屬性,在一般的 html 頁面就能呈現對應的效果(如下表簡單列出幾種),今天要介紹的是日期選擇框。隨著 UI 在網頁呈現上日趨重要,目前開源的日期選擇器非常多種,所以我也為 ANTD 提供之 DatePicker 做一篇介紹。

type 類型 輸入框會呈現的內容或其它說明
<input type="button"> 按鈕
<input type="color"> 顏色選擇器
<input type="email"> 信箱輸入欄
<input type="password"> 密碼輸入欄
<input type="tel"> 電話輸入欄
<input type="url"> 網址輸入欄
<input type="checkbox"> 多選的方框
<input type="radio"> 單選的圓框

一、最基本的使用方式:引用與呼叫它

import { DatePicker } from 'antd';

const App = () => (
  <div>
    <DatePicker onChange />
  <div/>
);

export default App;  

二、DatePicker 可添加的參數

參數就如同下方程式碼說明,也可以點此連結去看更多官方 api 文件
最常使用的就是 disabledDate 這個參數,對於日期提供有所限制的話可以搭配使用,對於使用者體驗上也會有加分效果,因為你總不能在他都點選送出後,才跳訊息說嗯...這個日期我們不可以接受吧XDD

屬性名稱 可以使用的值 說明
placement bottomLeft 或 bottomRight 或 topLeft 或 topRight 呈現的位置,預設是左下角
disabledDate function 你不希望提供給使用者選擇的日期,注意一定要用 function 來回傳這個日期值
picker time, date, week, month, quarter, year 這個選擇器你想要提供的模式,比較特別的是 quarter,是一季的意思。
format 基於 moment.js 格式化你的選擇值
renderExtraFooter ReactNode 如果需要在選擇器下方額外設置其它內容的話,可以使用
showToday true 或 false 在選擇器下方提供「選擇今日」的快捷鍵,預設是開啟的
showTime object 或 boolean 是否要提供時間選擇欄
showNow true 或 false 在選擇器下方提供「選擇現在」的快捷鍵,沒有預設值,一定要搭配showTime使用
onChange () => {} 就是 function

三、DatePicker 實際使用範例

以下就假設幾種情境,分享一下使用方法。

1.如果希望本屆鐵人賽的挑戰者,填寫預計開賽日期,那就要排除掉9/16後的日期


const disabledDate = (current) => {
  return current && current >= moment().max("2022-09-17");
};

<DatePicker 
    disabledDate={disabledDate}
    onChange 
/>

2.如果希望方便使用者填寫當下時間,可以把上述常用設定都設定打開

<DatePicker 
  showNow
  showTime
  showToday
  onChange 
/>

3. DatePicker 的元件練習

看完上面簡單的介紹後,下面提供我的一些簡單範例,若大家有興趣也可以到線上編輯器裡玩玩看唷!

https://ithelp.ithome.com.tw/upload/images/20220923/201409201kAhtK7t4r.png
先前專案元件示意圖

上一篇
Day07:Ant Design 的提示框
下一篇
Day09:Ant Design 裡的麵包屑(導覽列)
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-03 13:25:54

日期屬性好多英文單字可以學

我要留言

立即登入留言