日曆元件總覽（QA）

對稿 Figma p2：桌機（≥992px，Tailwind lg）＝日曆面板；平板與手機（<992px）＝rolldate 滾輪。 縮放視窗即可切換。桌機面板已無標題列、無 X、無確認鈕；點日期直接帶入並關閉，Esc 可關閉。 每個範例都附「簡化 HTML」—— 日曆鈕、面板、隱藏的 store 欄位都由元件生成， 頁面端只要一個 <input>（dp003 的民國／西元 tab 例外，仍要貼）。 實頁既有的標記則原樣沿用不重建，所以舊頁不必重貼也會自動升級。

datepicker001 — 生日

請輸入或選擇民國年、月、日
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="twDobEmpty" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="tw"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="twDobEmpty" id="twDobEmpty" autocomplete="off" class="tw-form-input" placeholder="民國 000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
驗證初始值換算＝西元 1981/07/07
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="twDobVal" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="tw"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="twDobVal" id="twDobVal" autocomplete="off" class="tw-form-input" value="070 / 07 / 07" placeholder="民國 000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
請輸入或選擇西元年、月、日
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="usDobEmpty" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="usDobEmpty" id="usDobEmpty" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="usDobVal" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="usDobVal" id="usDobVal" autocomplete="off" class="tw-form-input" value="1981 / 07 / 07" placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
JS 塞值：
簡化 HTML 
<div class="tw-form-group tw-has-disabled">
  <label formLabel for="twDobDis" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="tw"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap disabled tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="twDobDis" id="twDobDis" autocomplete="off" class="tw-form-input" disabled value="075 / 01 / 01" placeholder="民國 000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
JS 塞值：
簡化 HTML 
<div class="tw-form-group tw-has-disabled">
  <label formLabel for="usDobDis" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap disabled tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="usDobDis" id="usDobDis" autocomplete="off" class="tw-form-input" disabled placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

datepicker001 — 生效日／出發日／自訂

12:00 前為今日、之後為明日起算
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="caDate" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="comprehensiveAuto" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="caDate" id="caDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
最遠可選到後兩個月月底
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="efDate" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="effectiveDate" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="efDate" id="efDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
出發日期
  • ‧
    因保單處理及電訪需作業時間，請提早5天投保
  • ‧
    出發日期最晚不可超過60天
請輸入或選擇西元日期，例：出發日期為2024/10/4，保單生效日為2024/10/3 24時
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="departureDate" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="overseaDepartureDate" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="departureDate" id="departureDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
實頁設定：mode=dob＋民國，與生日同組但用途不同
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="originIssueDate" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-date-mode="dob" data-date-format="tw"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="originIssueDate" id="originIssueDate" autocomplete="off" class="tw-form-input" placeholder="民國 000/00/00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
限 1900/01/01 ～ 2006/08/12（由 minDate / maxDate 參數指定）
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="cuDate" class="tw-form-label">標籤文字</label>
  <div datepicker001 data-max-date="2006/08/12" data-min-date="1900/01/01" data-date-mode="custom" data-date-format="us"
       data-plugin="comp/datepicker001,datepicker" data-type="comp" data-comp-name="datepicker001"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker001Input name="cuDate" id="cuDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

datepicker002 — 出廠年月

面板寬 276、只有年／月兩個 tab、清單高 324；選年自動切到月、選月直接帶入並關閉。選中項應有淺綠底＋勾。

請選擇西元年、月
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="ymEmpty" class="tw-form-label">標籤文字</label>
  <div datepicker002 data-plugin="comp/datepicker002,datepicker" data-type="comp" data-comp-name="datepicker002"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker002Input name="ymEmpty" id="ymEmpty" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
JS 塞值：
簡化 HTML 
<div class="tw-form-group">
  <label formLabel for="ymVal" class="tw-form-label">標籤文字</label>
  <div datepicker002 data-plugin="comp/datepicker002,datepicker" data-type="comp" data-comp-name="datepicker002"
       class="tw-form-wrap tw-relative tw-bg-white">
    <input type="tel" datepicker002Input name="ymVal" id="ymVal" autocomplete="off" class="tw-form-input" value="2011 / 05" placeholder="西元 0000 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>
JS 塞值：
簡化 HTML 
<div class="tw-form-group tw-has-disabled">
  <label formLabel for="ymDis" class="tw-form-label">標籤文字</label>
  <div datepicker002 data-plugin="comp/datepicker002,datepicker" data-type="comp" data-comp-name="datepicker002"
       class="tw-form-wrap disabled tw-relative tw-bg-white">
    <input type="tel" datepicker002Input name="ymDis" id="ymDis" autocomplete="off" class="tw-form-input" disabled value="2022 / 04" placeholder="西元 0000 / 00">
  </div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

datepicker003 — 生日（民國／西元切換）

滾輪年份應顯示民國（閏年已修正）
JS 塞值：
簡化 HTML 
<!-- 注意：民國／西元切換的 tab 仍要貼在 HTML（元件只生日曆鈕與面板） -->
<div datepicker003 data-date-format="tw" data-date-mode="dob"
     data-plugin="comp/datepicker003,datepicker" data-type="comp" data-comp-name="datepicker003">
  <div class="tw-flex tw-flex-col lg:tw-flex-row tw-items-start tw-gap-8">
    <div datepicker003Tab class="tw-bg-white tw-relative tw-shrink-0">
      <div datepicker003TabBg class="tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-my-auto tw-h-36 tw-w-0 tw-rounded-8 tw-bg-primary-200"></div>
      <div class="tw-relative tw-inline-flex tw-gap-x-8 tw-rounded-8 tw-border-1 tw-border-neutral-variant-300 tw-px-3 tw-py-2">
        <button type="button" datepicker003TabItem data-mode="us" class="tw-w-56 tw-body-l ...">西元</button>
        <button type="button" datepicker003TabItem data-mode="tw" class="tw-w-56 tw-body-l ...">民國</button>
      </div>
    </div>
    <div class="tw-w-full lg:tw-w-auto tw-grow">
      <div datepicker003InputWrap class="tw-form-wrap tw-relative tw-bg-white">
        <input type="tel" datepicker003Input name="d3Tw" id="d3Tw" autocomplete="off" class="tw-form-input">
      </div>
      <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
    </div>
  </div>
</div>
JS 塞值：
簡化 HTML 
<!-- 注意：民國／西元切換的 tab 仍要貼在 HTML（元件只生日曆鈕與面板） -->
<div datepicker003 data-date-format="us" data-date-mode="dob"
     data-plugin="comp/datepicker003,datepicker" data-type="comp" data-comp-name="datepicker003">
  <div class="tw-flex tw-flex-col lg:tw-flex-row tw-items-start tw-gap-8">
    <div datepicker003Tab class="tw-bg-white tw-relative tw-shrink-0">
      <div datepicker003TabBg class="tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-my-auto tw-h-36 tw-w-0 tw-rounded-8 tw-bg-primary-200"></div>
      <div class="tw-relative tw-inline-flex tw-gap-x-8 tw-rounded-8 tw-border-1 tw-border-neutral-variant-300 tw-px-3 tw-py-2">
        <button type="button" datepicker003TabItem data-mode="us" class="tw-w-56 tw-body-l ...">西元</button>
        <button type="button" datepicker003TabItem data-mode="tw" class="tw-w-56 tw-body-l ...">民國</button>
      </div>
    </div>
    <div class="tw-w-full lg:tw-w-auto tw-grow">
      <div datepicker003InputWrap class="tw-form-wrap tw-relative tw-bg-white">
        <input type="tel" datepicker003Input name="d3Us" id="d3Us" autocomplete="off" class="tw-form-input">
      </div>
      <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
    </div>
  </div>
</div>
JS 塞值：
簡化 HTML 
<!-- 注意：民國／西元切換的 tab 仍要貼在 HTML（元件只生日曆鈕與面板） -->
<div datepicker003 data-date-format="tw" data-date-mode="dob"
     data-plugin="comp/datepicker003,datepicker" data-type="comp" data-comp-name="datepicker003">
  <div class="tw-flex tw-flex-col lg:tw-flex-row tw-items-start tw-gap-8">
    <div datepicker003Tab class="tw-bg-white tw-relative tw-shrink-0">
      <div datepicker003TabBg class="tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-my-auto tw-h-36 tw-w-0 tw-rounded-8 tw-bg-primary-200"></div>
      <div class="tw-relative tw-inline-flex tw-gap-x-8 tw-rounded-8 tw-border-1 tw-border-neutral-variant-300 tw-px-3 tw-py-2">
        <button type="button" datepicker003TabItem data-mode="us" class="tw-w-56 tw-body-l ...">西元</button>
        <button type="button" datepicker003TabItem data-mode="tw" class="tw-w-56 tw-body-l ...">民國</button>
      </div>
    </div>
    <div class="tw-w-full lg:tw-w-auto tw-grow">
      <div datepicker003InputWrap class="tw-form-wrap tw-relative tw-bg-white">
        <input type="tel" datepicker003Input name="d3TwVal" id="d3TwVal" autocomplete="off" class="tw-form-input" value="075 / 01 / 01">
      </div>
      <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
    </div>
  </div>
</div>

旅遊期間（easepick range）

HTML 只有 <label> 和送出用的 <input name="duration">；外框、兩個顯示框、「~」、 日曆鈕都是 datepicker005 用 JS 生的。送出的值仍是 YYYY/MM/DD ~ YYYY/MM/DD 一串掛在 duration 上，後端契約沒變。 面板為桌機（≥992px）限定。

JS 塞值：
簡化 HTML 
<div data-type="comp" data-plugin="comp/datepicker005,easepick" data-comp-name="datepicker005"
     data-mode="oversea" data-css="/css/easepick.css" class="tw-form-group">
  <label formLabel for="qaRangeOversea" class="tw-form-label">國外旅遊期間</label>
  <input type="tel" datepicker005Input name="duration" id="qaRangeOversea" autocomplete="off" readonly>
</div>
JS 塞值：
簡化 HTML 
<div data-type="comp" data-plugin="comp/datepicker005,easepick" data-comp-name="datepicker005"
     data-mode="domestic" data-css="/css/easepick.css" class="tw-form-group">
  <label formLabel for="qaRangeDomestic" class="tw-form-label">國內旅遊期間</label>
  <input type="tel" datepicker005Input name="duration" id="qaRangeDomestic" autocomplete="off" readonly>
</div>

起始日／結束日：淺綠圈 #76DB9B ＋ 深綠字 #00522D ＋ 2px 邊框 #59BE81； 中間日：淺綠色帶 #D2F6DC ＋ 深色字 #191C1A、圓圈無底。 實頁（calc003）版本另見 /travel/calc003.html。

選擇旅遊期間
一
二
三
四
五
六
日