@vue-cb/datepicker v1.0.3

Other

validate

alert

grid

modal

select

sidenav

paginate

Development

npm install @vue-cb/datepicker

Config

import datepicker from "@vue-cb/datepicker";

createApp(app).use(datepicker, {
    locale: "en",
    today: "today",
    clear: "clear",
    time: "time",
});

//dynamic

const state = reactive({
    lang: "en",
    today: "today",
    clear: "clear",
    time: "time",
});

createApp(app).use(datepicker, {
    locale: computed(() => state.lang),
    today: computed(() => state.today),
    clear: computed(() => state.clear),
    time: computed(() => state.time),
});

Usage

<v-date
    v-model="state.date"
    placeholder="วันที่"
    format="DD MMMM YYYY HH:mm"
    time
    :min="state.minDate"
/>
<v-month v-model="state.month" placeholder="เดือน" format="MMMM YYYY" />
<v-year v-model="state.year" placeholder="ปี" format="YYYY" />

inline

<v-date-inline
    v-model="state.date"
    placeholder="วันที่"
    format="DD MMMM YYYY HH:mm"
    time
    :min="state.minDate"
/>

custom time

<v-date-inline
    v-model="state.date"
    placeholder="วันที่"
    format="DD MMMM YYYY HH:mm"
    time
    :min="state.minDate"
    :hours="[12, 23]"
    :minutes="[30]"
/>

stepping minute

<v-date-inline
    v-model="state.date"
    placeholder="วันที่"
    format="DD MMMM YYYY HH:mm"
    time
    :min="state.minDate"
    :stepping="30"
/>

custom slot

<v-date
    v-model="state.date"
    placeholder="วันที่"
    format="DD MMMM YYYY HH:mm"
    time
    :min="state.minDate"
    :stepping="30"
>
    <template #date="ss">
        <div>({{ ss.data.d }})</div>
    </template>
</v-date>

import moment from "moment";

const state = reactive({
    date: moment(),
    minDate: moment(),
    month: moment(),
    year: moment(),
});

สำหรับ พ.ศ. ใช้ $moment เฉพาะ locale=th + thaiyear=true

//config
createApp(app).use(datepicker, {
    locale: "th",
    thaiyear: true,
});

//use
const $moment = inject("$moment");

// $moment().format("DD/MM/YYYY"); //ไม่รองรับ พ.ศ.
// $moment().$format("DD/MM/YYYY"); //รองรับ พ.ศ.

Props

Slots

📑 License

MIT License