# 使用Flatpickr的MonthSelect插件
由於[官方文件](https://flatpickr.js.org/plugins/)插件的使用方法沒有很清楚，故紀錄在此

先在原來flatpickr.js的路徑下面多加這兩個CDN或是檔案路徑

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>

檔案要用[npm](https://www.npmjs.com/package/flatpickr)下載
如果還沒有安裝需先下載[Node.js](https://nodejs.org/en/)
下載後到要安裝的資料夾輸入這個指令

npm i flatpickr

再加入參考路徑

<script src="~/flatpickr/dist/plugins/monthSelect/index.js"></script>
<script src="~/flatpickr/dist/l10n/zh-tw.js"></script>

如果需要使用繁體中文則可加入這行

<script src="https://npmcdn.com/flatpickr@4.6.3/dist/l10n/zh-tw.js"></script>

加入後即可在呼叫時多加一個Plugin的參數

 flatpickr("#test",{
        altInput: true,
        altInputClass: "fp_Month",
        "locale": "zh_tw",
        plugins: [
            new monthSelectPlugin({
                shorthand: true,
                dateFormat: "Ym", 
                altFormat: "M/Y",
            }),
        ],
        defaultDate:$(this).val()   
    });

altInput的功能會幫你多產出一個input讓你可以自訂想要的日期顯示[格式](https://flatpickr.js.org/formatting/)(在altFormat設定)
如此一來value會是dateFormat的格式、altFormat會是顯示的格式
若須給它class可加在altInputClass，如需選取它就只能用class選取沒法給它ID
locale則是可以選用需要的語系檔
若需查詢語系代碼可參考這個[檔案](https://npmcdn.com/flatpickr@4.6.3/dist/l10n/index.js)
defaultDate可設定它預設的值
最終效果如下
###### tags: `Javascript`