國泰產險

民國生日 - 年月日

元件：datepicker001

JS：/js/comp/datepicker001.js

元件參數需設定

民國年：data-date-format="tw"

模式：data-date-mode="dob"

data-date-mode="dob"

最小日：100年前的今天

最大日：今天

預設為：18年前的今天

Default

Preview

請輸入或選擇民國年、月、日

HTML

    
<div class="tw-form-group">
  <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="twDob" id="twDob" autocomplete="off" class="tw-form-input" placeholder="民國 000 / 00 / 00" onchange="doCheckDate(event);" onblur="doCheckDate(event);">
    <div class=" tw-h-24 tw-border-l tw-border-neutral-300 tw-pl-16">
      <button datepicker001Trigger type="button" class="tw-h-24 tw-w-24 tw-transition-opacity tw-will-change-opacity hover:tw-opacity-30 active:tw-opacity-30">
        <img src="/img/icons/grey-calendar.svg" />
      </button>
    </div>
    <!-- dropdown -->
    <input type="hidden" name="twDobStore" id="twDobStore" datepicker001InputStore />
    <div datepicker001Panel style="display: none" class="tw-absolute tw-top-44 tw-z-90 tw-w-[360px] tw-rounded-12 tw-bg-white tw-shadow-2 md:tw-right-0 lg:tw-left-0 lg:tw-right-auto">
      <div class="tw-relative tw-flex tw-h-[486px] tw-w-[360px] tw-flex-col tw-divide-y tw-divide-neutral-variant-200">
        <div class="tw-pt-16">
          <div class="tw-flex tw-items-center tw-px-24">
            <div class="tw-body-m tw-leading-none tw-text-neutral-900">選擇日期</div>
            <button datepicker001CloseBtn type="button" class="tw-ml-auto tw-h-20 tw-w-20 tw-transition-opacity tw-duration-100 tw-will-change-opacity hover:tw-opacity-30 active:tw-opacity-30">
              <img src="/img/icons/black-close.svg" />
            </button>
          </div>
          <div yearSelectWrap class="tw-novalidate tw-mt-20 tw-px-24 tw-pb-16">
            <select multiple data-placeholder="請選擇" data-search="false"></select>
          </div>
          <div yearTabWrap class="tw-mt-20">
            <div yearTab class="tw-relative tw-flex tw-justify-center">
              <div yearTabBg class="tw-absolute tw-bottom-0 tw-left-0 tw-h-4 tw-w-0 tw-rounded-4 tw-bg-primary-200 tw-transition-[left,width] tw-duration-200"></div>
              <button yearTabItem data-category="" type="button" aria-selected="false" class="tw-relative tw-grow tw-px-16 tw-py-10 tw-text-neutral-variant-600 tw-transition-colors tw-duration-300 tw-will-change-colors hover:tw-text-neutral-variant-800 active:tw-text-neutral-variant-800">
                <div class="tw-h4 tw-font-medium"></div>
              </button>
              <button yearTabItem data-category="" type="button" aria-selected="false" class="tw-relative tw-grow tw-px-16 tw-py-10 tw-text-neutral-variant-600 tw-transition-colors tw-duration-300 tw-will-change-colors hover:tw-text-neutral-variant-800 active:tw-text-neutral-variant-800">
                <div class="tw-h4 tw-font-medium"></div>
              </button>
            </div>
          </div>
        </div>
        <div class="tw-px-12">
          <div datepicker001Container></div>
          <button datepicker001Submit type="button" class="tw-btn-primary tw-mt-4 tw-w-full">確認</button>
        </div>
      </div>
    </div>
  </div>
  <div class="tw-form-hint tw-mt-2 tw-px-16 tw-text-neutral-600">請輸入或選擇民國年、月、日</div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

Default Value

格式：YYY / MM / DD ("/"前後，需有空格)


<input type="tel" datepicker001Input name="twDob" id="twDob" autocomplete="off" class="tw-form-input" placeholder="民國 000 / 00 / 00" value="075 / 01 / 01">

Preview

請輸入或選擇民國年、月、日

HTML


<div class="tw-form-group">
  <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="twDob" id="twDob" autocomplete="off" class="tw-form-input" placeholder="民國 000 / 00 / 00" value="075 / 01 / 01" onchange="doCheckDate(event);" onblur="doCheckDate(event);">
    <div class=" tw-h-24 tw-border-l tw-border-neutral-300 tw-pl-16">
      <button datepicker001Trigger type="button" class="tw-h-24 tw-w-24 tw-transition-opacity tw-will-change-opacity hover:tw-opacity-30 active:tw-opacity-30">
      <img src="/img/icons/grey-calendar.svg" />
      </button>
    </div>
    <!-- dropdown -->
    <input type="hidden" name="twDobStore" id="twDobStore" datepicker001InputStore />
    <div datepicker001Panel style="display: none" class="tw-absolute tw-top-44 tw-z-90 tw-w-[360px] tw-rounded-12 tw-bg-white tw-shadow-2 md:tw-right-0 lg:tw-left-0 lg:tw-right-auto">
      <div class="tw-relative tw-flex tw-h-[486px] tw-w-[360px] tw-flex-col tw-divide-y tw-divide-neutral-variant-200">
        <div class="tw-pt-16">
          <div class="tw-flex tw-items-center tw-px-24">
            <div class="tw-body-m tw-leading-none tw-text-neutral-900">選擇日期</div>
            <button datepicker001CloseBtn type="button" class="tw-ml-auto tw-h-20 tw-w-20 tw-transition-opacity tw-duration-100 tw-will-change-opacity hover:tw-opacity-30 active:tw-opacity-30">
            <img src="/img/icons/black-close.svg" />
            </button>
          </div>
          <div yearSelectWrap class="tw-novalidate tw-mt-20 tw-px-24 tw-pb-16">
            <select multiple data-placeholder="請選擇" data-search="false"></select>
          </div>
          <div yearTabWrap class="tw-mt-20">
            <div yearTab class="tw-relative tw-flex tw-justify-center">
              <div yearTabBg class="tw-absolute tw-bottom-0 tw-left-0 tw-h-4 tw-w-0 tw-rounded-4 tw-bg-primary-200 tw-transition-[left,width] tw-duration-200"></div>
              <button yearTabItem data-category="" type="button" aria-selected="false" class="tw-relative tw-grow tw-px-16 tw-py-10 tw-text-neutral-variant-600 tw-transition-colors tw-duration-300 tw-will-change-colors hover:tw-text-neutral-variant-800 active:tw-text-neutral-variant-800">
                <div class="tw-h4 tw-font-medium"></div>
              </button>
              <button yearTabItem data-category="" type="button" aria-selected="false" class="tw-relative tw-grow tw-px-16 tw-py-10 tw-text-neutral-variant-600 tw-transition-colors tw-duration-300 tw-will-change-colors hover:tw-text-neutral-variant-800 active:tw-text-neutral-variant-800">
                <div class="tw-h4 tw-font-medium"></div>
              </button>
            </div>
          </div>
        </div>
        <div class="tw-px-12">
          <div datepicker001Container></div>
          <button datepicker001Submit type="button" class="tw-btn-primary tw-mt-4 tw-w-full">確認</button>
        </div>
      </div>
    </div>
  </div>
  <div class="tw-form-hint tw-mt-2 tw-px-16 tw-text-neutral-600">請輸入或選擇民國年、月、日</div>
  <div class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
</div>

Set Value

格式：YYY / MM / DD ("/"前後，需有空格)

Preview

請輸入或選擇民國年、月、日


<button type="button" class="tw-btn-small-primary" onclick="setValueToDob3('055 / 12 / 20');">設定生日055 / 12 / 20</button>


<button type="button" class="tw-btn-small-primary" onclick="setValueToDob3('080 / 01 / 20');">設定生日080 / 01 / 20</button>


<script>
  function setValueToDob3(value){
    let target
    target = document.querySelector('[name=twDob3]')
    //use jquery to get element
    //target = $('[name=twDob3]').get(0);
    target.setValue(value)
  }
</script>

Validate Code Reference

請依照實際開發狀況調整


<script>
  function doCheckDate(event) {
    const targetElm = event.target;
    const value = targetElm.value.trim();
    //民國年+1911
    const date = new Date(value.replace(/^(\d{3})/, (match, year) => (parseInt(year) + 1911).toString()));
    const dateFormatRegex = /^\d{3}\s*\/\s*\d{2}\s*\/\s*\d{2}$/;
    if (value === '') {
      setInputStatus(targetElm, 'error', '請輸入資料');
    } else if (!dateFormatRegex.test(value)) {
      setInputStatus(targetElm, 'error', '日期格式應為 YYY / MM / DD');
    } else if (isNaN(date) || date === 'Invalid Date') {
      setInputStatus(targetElm, 'error', '請輸入有效的日期');
    } else {
      setInputStatus(targetElm, 'success');
    }
  }
</script>