@kananon/thai-datepicker/dist/thai-datepicker.umd.js

Thai Buddhist Calendar DatePicker for Vue 3

(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.ThaiDatePicker={},s.Vue))})(this,function(s,e){"use strict";const R="",V=(i,y)=>{const u=i.__vccOpts||i;for(const[m,f]of y)u[m]=f;return u},N={class:"input-wrapper"},S=["value","placeholder"],B={key:0,class:"calendar-popup"},b={class:"calendar-header"},w={class:"date-selectors"},M=["value"],T=["value"],C={class:"calendar-weekdays"},Y={class:"calendar-grid"},v=["onClick","aria-label"],h=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(i,{emit:y}){const u=i,m=y,f=e.ref(null),l=e.ref(null),p=e.ref(!1),d=new Date,r=e.ref(d.getMonth()),c=e.ref(d.getFullYear()),x=["มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน","กรกฎาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม"],P=["จ","อ","พ","พฤ","ศ","ส","อา"],$=e.computed(()=>{const a=[];for(let n=u.minYear;n<=u.maxYear;n++)a.push(n);return a}),O=e.computed(()=>new Date(c.value,r.value+1,0).getDate()),L=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}`}),j=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 A(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 U(a){return l.value&&l.value.year===c.value&&l.value.month===r.value&&l.value.day===a}function W(a){return d.getFullYear()===c.value&&d.getMonth()===r.value&&d.getDate()===a}function _(){p.value=!p.value}function D(a){l.value={year:c.value,month:r.value,day:a};const n=j.value;m("update:modelValue",n),m("change",n),p.value=!1}function z(){c.value=d.getFullYear(),r.value=d.getMonth(),D(d.getDate())}function H(){l.value=null,m("update:modelValue",""),m("change",""),p.value=!1}function E(a){f.value&&!f.value.contains(a.target)&&(p.value=!1)}return e.watch(()=>u.modelValue,a=>{l.value=A(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:f},[e.createElementVNode("div",N,[e.createElementVNode("input",{type:"text",value:I.value,onClick:_,readonly:"",placeholder:i.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(()=>[p.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(x,(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($.value,t=>(e.openBlock(),e.createElementBlock("option",{key:t,value:t},e.toDisplayString(g(t)),9,T))),128))],512),[[e.vModelSelect,c.value]])])]),e.createElementVNode("div",C,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(P,t=>e.createElementVNode("div",{key:t,class:"weekday"},e.toDisplayString(t),1)),64))]),e.createElementVNode("div",Y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.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(O.value,t=>(e.openBlock(),e.createElementBlock("button",{key:t,type:"button",class:e.normalizeClass(["calendar-cell day",{selected:U(t),today:W(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(i){i.component("ThaiDatePicker",h),i.component("thai-date-picker",h)},ThaiDatePicker:h};s.ThaiDatePicker=h,s.default=F,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});