Date picker
OverviewOfficial Website
vue datepicker is a lightweight and powerful datetime picker.
Import Package
import VueDatePicker from "@vuepic/vue-datepicker";
Add Package
yarn add @vuepic/vue-datepicker
Remove Package
yarn remove @vuepic/vue-datepicker Or you can
remove package by
removing specific package from package.json
CSS
import "@vuepic/vue-datepicker/dist/main.css";Datepicker Examples
| Title | Example |
|---|---|
| Basic |
// state
const date = ref();
// component
<VueDatePicker v-model="date1" :teleport="true" />
|
| DateTime |
// state
const date = ref();
// component
<VueDatePicker
v-model="date"
:teleport="true"
:enable-time-picker="false"
/>
|
| Human-Friendly Dates |
// state
const date = ref();
// component
<VueDatePicker
v-model="date"
:teleport="true"
:enable-time-picker="false"
:format="format"
/>
// method
const format = (date: Date) => {
return formateDate(date);
// formateDate is common utils define at src/app/common/dateFormate.ts
};
|
| MinDate and MaxDate |
// state
const date = ref();
// component
<VueDatePicker
v-model="date"
:min-date="new Date()"
:max-date="getLastDate()"
:teleport="true"
:enable-time-picker="false"
/>
// method
const getLastDate = () => {
const today = new Date();
const lastDay = new Date(today);
lastDay.setDate(today.getDate() + 7);
return lastDay;
};
|
| Default Date |
// state
const date = ref(new Date());
// component
<VueDatePicker
v-model="date"
:teleport="true"
:enable-time-picker="false"
/>
|
| Disabling Dates |
// state
const date = ref();
// component
<VueDatePicker
v-model="date"
:disabled-dates="disabledDates"
:teleport="true"
:enable-time-picker="false"
/>
// method
const disabledDates = computed(() => {
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const endDate = new Date(tomorrow);
endDate.setDate(today.getDate() + 5);
return [tomorrow, endDate];
});
|
| Range |
// component
<VueDatePicker range :teleport="true" />
|
| Inline |
// component
<VueDatePicker
:inline="{ input: true }"
v-model="date7"
:teleport="true"
class="d-block"
:enable-time-picker="false"
auto-apply
/>
|
Timepickr Examples
| Title | Example |
|---|---|
| Basic Timepicker |
// state
const time = ref();
//component
<VueDatePicker
v-model="time"
auto-apply
time-picker
:teleport="true"
/>
|
| Enable seconds |
// state
const time = ref();
// component
<VueDatePicker
v-model="time"
auto-apply
time-picker
enable-seconds
:teleport="true"
/>
|
| Min max time |
// state
const time = ref();
// component
<VueDatePicker
v-model="time"
auto-apply
time-picker
:min-time="{ hours: 3, minutes: 30 }"
:max-time="{ hours: 10, minutes: 30 }"
:teleport="true"
/>
|
| Inline |
// state
const time = ref();
// component
<VueDatePicker
v-model="time"
is-24
class="d-block"
auto-apply
time-picker
:teleport="true"
:inline="true"
/>
|