@vue-cb/datepicker

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

name	value	default	desciption
time	boolean	false	date
multiple	boolean	false	-
placeholder	string	-	-
format	string	-	-
start	moment	-	-
min	moment	-	-
max	moment	-	-
today	boolean	-	-
disable	function	-	-
hours	array	[00-23]	time or (date and time)
minutes	array	[00-59]	time or (date and time)
stepping	number	1	time or (date and time)
placeholderHours	string	hours	time or (date and time)
placeholderMinutes	string	minutes	time or (date and time)

Slots

name	desciption
date	date
month	month
year	year

📑 License

MIT License