uivDatePicker
A lightweight & configurable date picker.
Example
Use v-model to bind the selected date.
vue
<template>
<DatePicker v-model="date" />
<br />
<Alert v-show="date" type="info">
You selected
<b>{{ date }}.</b>
</Alert>
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker, Alert } from 'uiv';
const date = ref(null);
</script>Formats
You can use any format you like. For example:
- yyyy-M-d
- yyyy-MM-dd
- yyyy-MMM-dd
- yyyy-MMMM-dd
- yyyy/MM/dd
- MM/dd/yyyy
- yyyy, MM, dd
- ...
WARNING
Some browsers (e.g. IE) might not support all of these formats.
If you need a special format that not supported by Date.parse, consider using date-parser option to override it.
vue
<template>
<DatePicker v-model="date" format="yyyy/MMMM/dd" />
<br />
<Alert v-show="date" type="info">
You selected <b>{{ date }}.</b>
</Alert>
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker, Alert } from 'uiv';
const date = ref(null);
</script>Buttons
Use today-btn and clear-btn to toggle visible of them.
vue
<template>
<DatePicker v-model="date" :today-btn="false" :clear-btn="false" />
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker } from 'uiv';
const date = ref(null);
</script>Range limit
Example that limit date range from today, to next week:
vue
<template>
<DatePicker v-model="date" :limit-from="limitFrom" :limit-to="limitTo" />
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker } from 'uiv';
const date = ref(null);
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);
const limitFrom = ref(today);
const limitTo = ref(nextWeek);
</script>Week starts
Change the starting day of the week. Support 0 (Sunday) ~ 6 (Saturday).
vue
<template>
<DatePicker v-model="date" :week-starts-with="1" />
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker } from 'uiv';
const date = ref(null);
</script>Week numbers
vue
<template>
<DatePicker v-model="date" week-numbers />
<br />
<Alert v-show="date" type="info">
You selected <b>{{ date }}.</b>
</Alert>
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker, Alert } from 'uiv';
const date = ref(null);
</script>With dropdown
vue
<template>
<form class="form-inline uiv">
<Dropdown class="form-group">
<div class="input-group">
<input v-model="date" class="form-control" type="text" />
<div class="input-group-btn">
<Btn class="dropdown-toggle"
><i class="glyphicon glyphicon-calendar"></i
></Btn>
</div>
</div>
<template #dropdown>
<li>
<DatePicker v-model="date" />
</li>
</template>
</Dropdown>
</form>
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker, Dropdown, Btn } from 'uiv';
const date = ref(null);
</script>Custom date classes
Use date-class to apply custom classes to each date button, which should be an function that:
- takes the date of button as the first param.
- also with current month and year showing of the picker in the second param.
- returns the class(es).
See below example for detail usage, which has all sunday highlighted:
vue
<template>
<DatePicker v-model="date" :date-class="dateClass" />
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker } from 'uiv';
const date = ref(null);
function dateClass(d) {
return d.getDay() === 0 ? 'btn-sunday' : '';
}
</script>
<style lang="less">
.uiv .btn-sunday.btn-default,
.uiv .btn-sunday.btn-primary {
background-color: #46bd87;
color: #fff;
border-radius: 0;
opacity: 0.7;
outline: 0 !important;
&:hover,
&:focus,
&:active {
background-color: #46bd87 !important;
opacity: 1;
}
}
</style>API Reference
DatePicker
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
v-model | ✔ | The selected date. | ||
width | Number | 270 | The date-picker's width in px. | |
today-btn | Boolean | true | Show / hide the today button. | |
clear-btn | Boolean | true | Show / hide the clear button. | |
format | String | yyyy-MM-dd | The date format, will emit Date object if provided as empty string. | |
close-on-selected | Boolean | true | Close the date-picker dropdown after date selected. | |
limit-from | Anything that can convert to a valid Date object. E.g. 2017-01-01 or new Date(). | |||
limit-to | Same as limit-from. | |||
initial-view | String | d | Open the date-picker with specify view (one of d / m / y) on initial. Only works if the v-model is empty. | |
week-starts-with | Number | 0 | Starting day of the week. Support 0 (Sunday) ~ 6 (Saturday). | |
week-numbers | Boolean | false | Show week numbers of year. | |
date-parser | Function | Date.parse | Use this prop to replace the Date.parse call inside the component. Useful when The formatted String can not be correctly parsed to Date type by Date.parse (e.g. dd-MM-yyyy). For example: dateParser (value) {return moment(value, 'DD-MM-YYYY').toDate().getTime()} | |
date-class | Function | The custom class callback function for each date. See above example section for details. | ||
year-month-formatter | Function | The formatter function of year month label string on top of date view, with 2 params year and month (0-based), with the formatted string returned. | ||
icon-control-left | String | glyphicon glyphicon-chevron-left | The arrow icon shown inside the previous button. | |
icon-control-right | String | glyphicon glyphicon-chevron-right | The arrow icon shown inside the next button. |