@kananon/thai-datepicker
Version:
Thai Buddhist Calendar DatePicker for Vue 3
2 lines (1 loc) • 5.6 kB
JavaScript
var ThaiDatePicker=function(y,e){"use strict";const R="",V=(s,h)=>{const d=s.__vccOpts||s;for(const[u,p]of h)d[u]=p;return d},N={class:"input-wrapper"},S=["value","placeholder"],B={key:0,class:"calendar-popup"},b={class:"calendar-header"},w={class:"date-selectors"},M=["value"],C=["value"],Y={class:"calendar-weekdays"},T={class:"calendar-grid"},v=["onClick","aria-label"],f=V({__name:"ThaiDatePicker",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"เลือกวันที่"},minYear:{type:Number,default:()=>new Date().getFullYear()-50},maxYear:{type:Number,default:()=>new Date().getFullYear()+10}},emits:["update:modelValue","change"],setup(s,{emit:h}){const d=s,u=h,p=e.ref(null),l=e.ref(null),m=e.ref(!1),i=new Date,r=e.ref(i.getMonth()),c=e.ref(i.getFullYear()),P=["มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน","กรกฎาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม"],$=["จ","อ","พ","พฤ","ศ","ส","อา"],O=e.computed(()=>{const a=[];for(let n=d.minYear;n<=d.maxYear;n++)a.push(n);return a}),L=e.computed(()=>new Date(c.value,r.value+1,0).getDate()),x=e.computed(()=>(new Date(c.value,r.value,1).getDay()+6)%7),I=e.computed(()=>{if(!l.value)return"";const{year:a,month:n,day:t}=l.value,o=g(a),k=String(n+1).padStart(2,"0");return`${String(t).padStart(2,"0")}/${k}/${o}`}),A=e.computed(()=>{if(!l.value)return"";const{year:a,month:n,day:t}=l.value,o=String(n+1).padStart(2,"0");return`${String(t).padStart(2,"0")}/${o}/${a}`});function g(a){return a+543}function U(a){if(!a)return null;const n=a.split("/");if(n.length!==3)return null;const t=parseInt(n[0],10),o=parseInt(n[1],10)-1,k=parseInt(n[2],10);return isNaN(t)||isNaN(o)||isNaN(k)?null:{year:k,month:o,day:t}}function W(a){return l.value&&l.value.year===c.value&&l.value.month===r.value&&l.value.day===a}function j(a){return i.getFullYear()===c.value&&i.getMonth()===r.value&&i.getDate()===a}function _(){m.value=!m.value}function D(a){l.value={year:c.value,month:r.value,day:a};const n=A.value;u("update:modelValue",n),u("change",n),m.value=!1}function z(){c.value=i.getFullYear(),r.value=i.getMonth(),D(i.getDate())}function H(){l.value=null,u("update:modelValue",""),u("change",""),m.value=!1}function E(a){p.value&&!p.value.contains(a.target)&&(m.value=!1)}return e.watch(()=>d.modelValue,a=>{l.value=U(a),l.value&&(c.value=l.value.year,r.value=l.value.month)},{immediate:!0}),e.onMounted(()=>{document.addEventListener("click",E)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",E)}),(a,n)=>(e.openBlock(),e.createElementBlock("div",{class:"datepicker",ref_key:"datepickerRef",ref:p},[e.createElementVNode("div",N,[e.createElementVNode("input",{type:"text",value:I.value,onClick:_,readonly:"",placeholder:s.placeholder,class:"datepicker-input"},null,8,S),(e.openBlock(),e.createElementBlock("svg",{class:"calendar-icon",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",onClick:_},n[2]||(n[2]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"},null,-1)])))]),e.createVNode(e.Transition,{name:"calendar"},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",b,[e.createElementVNode("div",w,[e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":n[0]||(n[0]=t=>r.value=t),class:"date-select month-select","aria-label":"เลือกเดือน"},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(P,(t,o)=>e.createElementVNode("option",{key:o,value:o},e.toDisplayString(t),9,M)),64))],512),[[e.vModelSelect,r.value]]),e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":n[1]||(n[1]=t=>c.value=t),class:"date-select year-select","aria-label":"เลือกปี"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(O.value,t=>(e.openBlock(),e.createElementBlock("option",{key:t,value:t},e.toDisplayString(g(t)),9,C))),128))],512),[[e.vModelSelect,c.value]])])]),e.createElementVNode("div",Y,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList($,t=>e.createElementVNode("div",{key:t,class:"weekday"},e.toDisplayString(t),1)),64))]),e.createElementVNode("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,t=>(e.openBlock(),e.createElementBlock("div",{key:`empty-${t}`,class:"calendar-cell empty"}))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,t=>(e.openBlock(),e.createElementBlock("button",{key:t,type:"button",class:e.normalizeClass(["calendar-cell day",{selected:W(t),today:j(t),"other-month":!1}]),onClick:o=>D(t),"aria-label":`เลือกวันที่ ${t}`},e.toDisplayString(t),11,v))),128))]),e.createElementVNode("div",{class:"calendar-footer"},[e.createElementVNode("button",{type:"button",class:"today-button",onClick:z}," วันนี้ "),e.createElementVNode("button",{type:"button",class:"clear-button",onClick:H}," ล้าง ")])])):e.createCommentVNode("",!0)]),_:1})],512))}},[["__scopeId","data-v-11103d82"]]),F={install(s){s.component("ThaiDatePicker",f),s.component("thai-date-picker",f)},ThaiDatePicker:f};return y.ThaiDatePicker=f,y.default=F,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),y}({},Vue);