出廠年月 - 西元年月
元件：datepicker002
最小日：30年前的1月
最大日：本月
預設為：無
Default
Preview
請輸入或選擇西元年月
HTML
<div class="tw-form-group ">
<div datepicker002 data-date-format="us-yyyy-mm" 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="madeDate" id="madeDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00" value="2024 / 04" onchange="doCheckDate(event);" onblur="doCheckDate(event);">
<div class=" tw-h-24 tw-border-l tw-border-neutral-300 tw-pl-16">
<button datepicker002Trigger 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" value="" name="madeDateStore" id="madeDateStore" datepicker002InputStore />
<div datepicker002Panel 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-flex-col">
<div>
<div class="tw-px-24 tw-py-16">
<div class="tw-flex tw-items-center">
<div class="tw-body-m tw-leading-none tw-text-neutral-900">選擇日期</div>
<button datepicker002CloseBtn 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>
<div>
<div class="tw-relative tw-flex">
<button type="button" datepicker002TabItem data-type="year" class="tw-flex tw-basis-1/2 tw-items-center tw-justify-center tw-py-16 hover:tw-text-primary-500 active:tw-text-primary-500">2024年</button>
<button type="button" datepicker002TabItem data-type="month" class="tw-flex tw-basis-1/2 tw-items-center tw-justify-center tw-py-16 hover:tw-text-primary-500 active:tw-text-primary-500">1月</button>
<div class="tw-absolute tw-bottom-0 tw-left-0 tw-h-1 tw-w-full tw-bg-neutral-variant-100"></div>
<div datepicker002TabPointer class="tw-transition-left tw-will-change-left tw-absolute tw-bottom-0 tw-left-0 tw-h-4 tw-w-1/2 tw-rounded-3 tw-bg-primary-200 tw-duration-200"></div>
</div>
</div>
</div>
<div ddd class="tw-py-8">
<div datepicker002YearContainer class="tw-h-[247px] tw-max-h-[247px] tw-overflow-y-auto" role="listbox"></div>
<div datepicker002MonthContainer class="tw-h-[247px] tw-max-h-[247px] tw-overflow-y-auto" role="listbox"></div>
</div>
<div class="tw-border-t tw-border-neutral-variant-100 tw-px-40 tw-py-16">
<button datepicker002Next type="button" class="tw-btn-primary tw-mt-4 tw-w-full">下一步</button>
<button datepicker002Submit type="button" class="tw-btn-primary tw-mt-4 tw-w-full">確認</button>
</div>
</div>
</div>
<script yearMonthDropdownItem type="text/template">
<button type="button" dropdownItem data-type="{type}" data-text="{text}" data-value="{value}" aria-checked="false" class="tw-body-l tw-group tw-flex tw-flex tw-h-40 tw-w-full tw-items-center tw-gap-x-16 tw-bg-white tw-px-16 tw-text-neutral-900 hover:tw-bg-primary-100 active:tw-bg-primary-100 group-aria-checked:tw-bg-primary-100" role="option">
<div class="group-hover:tw-opacity-1 group-active:tw-opacity-1 tw-h-24 tw-w-24 tw-shrink-0 tw-overflow-hidden tw-opacity-0 tw-transition-opacity tw-duration-200 tw-will-change-opacity group-aria-checked:tw-text-primary-400 group-aria-checked:tw-opacity-[1]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 11.625L9.2449 18L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="tw-body-l tw-flex tw-items-center tw-text-left tw-text-[#1D1B20]">{label}</div>
</button>
</script>
</div>
<div class="tw-form-hint tw-mt-2 tw-pl-16 tw-text-neutral-600">請輸入或選擇西元年月</div>
<div class="tw-form-error-msg tw-mt-2 tw-pl-16"></div>
</div>
Default Value
格式：YYYY / MM ("/"前後，需有空格)
<input type="tel" datepicker002Input name="madeDate" id="madeDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00" value="2024 / 04" >
Preview
請輸入或選擇西元年月
HTML
<div class="tw-form-group ">
<div datepicker002 data-date-format="us-yyyy-mm" 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="madeDate" id="madeDate" autocomplete="off" class="tw-form-input" placeholder="西元 0000 / 00" value="2024 / 04" onchange="doCheckDate(event);" onblur="doCheckDate(event);">
<div class=" tw-h-24 tw-border-l tw-border-neutral-300 tw-pl-16">
<button datepicker002Trigger 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" value="" name="madeDateStore" id="madeDateStore" datepicker002InputStore />
<div datepicker002Panel 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-flex-col">
<div>
<div class="tw-px-24 tw-py-16">
<div class="tw-flex tw-items-center">
<div class="tw-body-m tw-leading-none tw-text-neutral-900">選擇日期</div>
<button datepicker002CloseBtn 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>
<div>
<div class="tw-relative tw-flex">
<button type="button" datepicker002TabItem data-type="year" class="tw-flex tw-basis-1/2 tw-items-center tw-justify-center tw-py-16 hover:tw-text-primary-500 active:tw-text-primary-500">2024年</button>
<button type="button" datepicker002TabItem data-type="month" class="tw-flex tw-basis-1/2 tw-items-center tw-justify-center tw-py-16 hover:tw-text-primary-500 active:tw-text-primary-500">1月</button>
<div class="tw-absolute tw-bottom-0 tw-left-0 tw-h-1 tw-w-full tw-bg-neutral-variant-100"></div>
<div datepicker002TabPointer class="tw-transition-left tw-will-change-left tw-absolute tw-bottom-0 tw-left-0 tw-h-4 tw-w-1/2 tw-rounded-3 tw-bg-primary-200 tw-duration-200"></div>
</div>
</div>
</div>
<div ddd class="tw-py-8">
<div datepicker002YearContainer class="tw-h-[247px] tw-max-h-[247px] tw-overflow-y-auto" role="listbox"></div>
<div datepicker002MonthContainer class="tw-h-[247px] tw-max-h-[247px] tw-overflow-y-auto" role="listbox"></div>
</div>
<div class="tw-border-t tw-border-neutral-variant-100 tw-px-40 tw-py-16">
<button datepicker002Next type="button" class="tw-btn-primary tw-mt-4 tw-w-full">下一步</button>
<button datepicker002Submit type="button" class="tw-btn-primary tw-mt-4 tw-w-full">確認</button>
</div>
</div>
</div>
<script yearMonthDropdownItem type="text/template">
<button type="button" dropdownItem data-type="{type}" data-text="{text}" data-value="{value}" aria-checked="false" class="tw-body-l tw-group tw-flex tw-flex tw-h-40 tw-w-full tw-items-center tw-gap-x-16 tw-bg-white tw-px-16 tw-text-neutral-900 hover:tw-bg-primary-100 active:tw-bg-primary-100 group-aria-checked:tw-bg-primary-100" role="option">
<div class="group-hover:tw-opacity-1 group-active:tw-opacity-1 tw-h-24 tw-w-24 tw-shrink-0 tw-overflow-hidden tw-opacity-0 tw-transition-opacity tw-duration-200 tw-will-change-opacity group-aria-checked:tw-text-primary-400 group-aria-checked:tw-opacity-[1]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 11.625L9.2449 18L21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="tw-body-l tw-flex tw-items-center tw-text-left tw-text-[#1D1B20]">{label}</div>
</button>
</script>
</div>
<div class="tw-form-hint tw-mt-2 tw-pl-16 tw-text-neutral-600">請輸入或選擇西元年月</div>
<div class="tw-form-error-msg tw-mt-2 tw-pl-16"></div>
</div>
Set Value
格式：YYYY / MM / DD ("/"前後，需有空格)
Preview
請輸入或選擇西元年月
JS
<button type="button" class="tw-btn-small-primary" onclick="setValueToElement('2024 / 02');">設定日2024 / 02</button>
<script>
function setValueToElement(value){
let target
target = document.querySelector('[name=madeDate3]')
//use jquery to get element
//target = $('[name=madeDate3]').get(0);
target.value = value
target.setValue(value);
}
</script>
Validate Code Reference
請依照實際開發狀況調整
JS
<script>
function doCheckDate(event) {
const targetElm = event.target;
const value = targetElm.value.trim();
const date = new Date(value+" / 01");
const dateFormatRegex = /^\d{4}\s*\/\s*\d{2}$/;
if (value === '') {
setInputStatus(targetElm, 'error', '請輸入資料');
} else if (!dateFormatRegex.test(value)) {
setInputStatus(targetElm, 'error', '日期格式應為 YYYY / MM');
} else if (isNaN(date) || date === 'Invalid Date') {
setInputStatus(targetElm, 'error', '請輸入有效的日期');
} else {
setInputStatus(targetElm, 'success');
}
}
</script>
