DatePicker

A lightweight & configurable date picker.

Example

Use v-model to bind the selected date.

SunMonTueWedThuFriSat


<template>
  <section class="uiv">
    <DatePicker v-model="date" />
    <br />
    <Alert v-show="date" type="info">
      You selected
      <b>{{ date }}.</b>
    </Alert>
  </section>
</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.

SunMonTueWedThuFriSat


<template>
  <section class="uiv">
    <DatePicker v-model="date" format="yyyy/MMMM/dd" />
    <br />
    <Alert v-show="date" type="info">
      You selected <b>{{ date }}.</b>
    </Alert>
  </section>
</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.

SunMonTueWedThuFriSat
<template>
  <div class="uiv">
    <DatePicker v-model="date" :today-btn="false" :clear-btn="false" />
  </div>
</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:

SunMonTueWedThuFriSat

<template>
  <div class="uiv">
    <DatePicker v-model="date" :limit-from="limitFrom" :limit-to="limitTo" />
  </div>
</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).

MonTueWedThuFriSatSun

<template>
  <div class="uiv">
    <DatePicker v-model="date" :week-starts-with="1" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker } from 'uiv';

const date = ref(null);
</script>

Week numbers

SunMonTueWedThuFriSat
52
1
2
3
4
5


<template>
  <section class="uiv">
    <DatePicker v-model="date" week-numbers />
    <br />
    <Alert v-show="date" type="info">
      You selected <b>{{ date }}.</b>
    </Alert>
  </section>
</template>
<script setup>
import { ref } from 'vue';
import { DatePicker, Alert } from 'uiv';

const date = ref(null);
</script>

With dropdown


<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:

SunMonTueWedThuFriSat

<template>
  <div class="uiv">
    <DatePicker v-model="date" :date-class="dateClass" />
  </div>
</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

NameTypeDefaultRequiredDescription
v-modelThe selected date.
widthNumber270The date-picker's width in px.
today-btnBooleantrueShow / hide the today button.
clear-btnBooleantrueShow / hide the clear button.
formatStringyyyy-MM-ddThe date format, will emit Date object if provided as empty string.
close-on-selectedBooleantrueClose the date-picker dropdown after date selected.
limit-fromAnything that can convert to a valid Date object. E.g. 2017-01-01 or new Date().
limit-toSame as limit-from.
initial-viewStringdOpen the date-picker with specify view (one of d / m / y) on initial. Only works if the v-model is empty.
week-starts-withNumber0Starting day of the week. Support 0 (Sunday) ~ 6 (Saturday).
week-numbersBooleanfalseShow week numbers of year.
date-parserFunctionDate.parseUse 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-classFunctionThe custom class callback function for each date. See above example section for details.
year-month-formatterFunctionThe 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-leftStringglyphicon glyphicon-chevron-leftThe arrow icon shown inside the previous button.
icon-control-rightStringglyphicon glyphicon-chevron-rightThe arrow icon shown inside the next button.