國泰產險

自訂 - 西元年月日

元件：datepicker001

JS：https://insweb.doinsane.co/js/comp/datepicker001.js

元件參數需設定

西元年：data-date-format="us"

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

最小日：data-min-date="YYYY/MM/DD"

最大日：data-max-date="YYYY/MM/DD"

data-date-mode="custom"

預設為：今天

Default

Preview

請輸入或選擇西元年、月、日

HTML

    
<div class="tw-form-group  ">
    <div datepicker001 data-max-date="2024/04/30" data-min-date="2024/04/1" data-date-mode="custom" 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="usCustom" id="usCustom" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 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="usCustomStore" id="usCustomStore" 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-caption 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

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


<input type="tel" datepicker001Input name="usCustom2" id="usCustom2" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00 / 00" value="2024 / 04 / 20">

Preview

請輸入或選擇西元年、月、日

HTML


<div class="tw-form-group  ">
    <div datepicker001 data-max-date="2024/04/30" data-min-date="2024/04/1" data-date-mode="custom" 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="usCustom2" id="usCustom2" autocomplete="off" class="tw-form-input" value="2024 / 04 / 20" placeholder="西元 0000 / 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="usCustom2Store" id="usCustom2Store" 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-caption 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

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

Preview

請輸入或選擇西元年、月、日


<button type="button" class="tw-btn-small-primary" onclick="setValueToCustom3('2024 / 04 / 01');">設定2024 / 04 / 01</button>


<button type="button" class="tw-btn-small-primary" onclick="setValueToCustom3('2024 / 04 / 21');">設定2024 / 04 / 21</button>


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

Validate Code Reference

請依照實際開發狀況調整


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