primereact 有提供相當多 Form元件
除了最基本的InputText、InputTextarea、RadioButton外，
還有Dropdown、MultiSelect 以及與Quill配合的Editor，

因為很多，所以從中挑選幾樣我覺得很棒的元件出來說說
感覺可以講很多，不如就分上、中、下三集吧!
今天就先來說說Calendar、Chips這幾樣吧!
因為昨天已經做了側邊導航列，接下來會根據主題建立導航列跟文件名稱

但說到Calendar就不得不說說我跟minDate之間的愛恨情仇，
迄今我還是覺得應該是10.6.3版的bug，
但後面版本有沒有除掉我就不清楚了，
畢竟我真不願意回去看元件Code，我只是一條沒有上進心的鹹魚啊!!!

事情是這樣的，某天案子進來了，
因此先進行看著Figma初步切版，
切著切著看到小日曆有個要求是，
只能選今天之後的日期，覺得沒甚麼添加的minDate就可以了，
然後看到版型添加了yearNavigator跟monthNavigator，
然後再加個local讓它吃config更改一下顯示語言，
想說css也拉好日曆的皮了，一切顯示完美，也快下班整個人心情愉悅，
還有點時間，不如試試功能吧!
先從切換月份開始，先來選下個月好了~(我點)
嗯?怎麼還是這個月，難道是手殘???
應該是我手殘吧?!!
那...那在切一次?(謹慎點擊)
不!!!不可能!!!為什麼還是這個月????!!!!
那...月份壞了?那年份呢?
啊~~~鴨霸哩...壞了
完了，總不能跟上頭說...
「哈哈...因為PrimeReact壞了只能看不能改~你們就看看就好」
這種不負責任又不要臉的話...我說不出口啊
這時只有幾百隻草泥馬在心裡奔騰
用我破爛英文找找有沒有人跟我有一樣問題，
可能英文真的太破，完全找不到...
天啊!!我都要哭了
難道我...又要去啃code了
好吧...認了...啃吧!
又不是沒啃過...怕它?
再不濟就再下一個UI，
東看看西看看，嗯...
看起來...要來點yearRange，
好吧...我從來沒想過這貨能對minDate有啥影響，
還好有認真的找到方案
因為隔天早上就被抓去會議室開專案會議

總之yearNavigator加minDate在PrimeReact 10.6.3版會碰出新滋味
給遇到一樣問題的人參考

故事說完了，元件也介紹了差不多了
先來說說日曆中文化吧，應該是滿需要的
建立一個日曆config
calendar.json

{
    "firstDayOfWeek": 0,
    "dayNames": ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
    "dayNamesShort": ["日","一","二","三","四","五","六"],
    "dayNamesMin": ["日","一","二","三","四","五","六"],
    "monthNames": ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    "monthNamesShort": ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}

再來引入
Forms.tsx

import React, { useState } from 'react';
import { Calendar } from 'primereact/calendar';
import { addLocale } from 'primereact/api';
import { Nullable } from 'primereact/ts-helpers';
import Config from '../config/calendar.json';
const FormsCompnent: React.FC = () => {
    const [dates, setDates] = useState<Nullable<Date[]>>(null);
    addLocale('zh-cn', Config);
    return (
        <div>
            <Calendar
                readOnlyInput //如果不想讓使用者隨意輸入
                selectionMode="range"//選擇模式 一般為single 還有multiple多選不用連續 range連續日期
                locale="zh-cn"
                placeholder="請選日期"
                dateFormat="yy/mm/dd" //日期格式
                value={dates} //multiple跟range都要為Date[]
                onChange={(e: any) => setDates(e.value)} 
                hideOnRangeSelection //選完自動隱藏
                />
        </div>
    );
}
export default FormsCompnent;

Calendar元件介紹得差不多了，再來說說Chips
說到Chips就會想到FloatLabel TS Bug 原本想用酷酷功能，結果GG了
https://github.com/primefaces/primereact/issues/6438
但看起來，10.6.4有進行維修，
當然這功能不只在Chips，只是在弄它時發現的，
說完，其實也差不多把Chips講完了
引用

import { Chips } from 'primereact/chips';

然後設定values

const [value, setValue] = useState<string[]>([]);

再來塞component

<Chips value={value} onChange={(e: any) => setValue(e.value)}/> 

好了說得差不多啦~
明天見!