uiv

# DatePicker

A lightweight & configurable date picker.

# Example

Use v-model to bind the selected date.

SunMonTueWedThuFriSat
 


<template>
  <section class="uiv">
    <date-picker v-model="date" />
    <br />
    <alert v-show="date" type="info"
      >You selected <b>{{ date }}</b
      >.</alert
    >
  </section>
</template>
<script>
export default {
  data() {
    return {
      date: 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">
    <date-picker v-model="date" format="yyyy/MMMM/dd" />
    <br />
    <alert v-show="date" type="info"
      >You selected <b>{{ date }}</b
      >.</alert
    >
  </section>
</template>
<script>
export default {
  data() {
    return {
      date: null,
    }
  },
}
</script>

# Buttons

Use today-btn and clear-btn to toggle visible of them.

SunMonTueWedThuFriSat
 
<template>
  <div class="uiv">
    <date-picker v-model="date" :today-btn="false" :clear-btn="false" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: null,
    }
  },
}
</script>

# Range limit

Example that limit date range from today, to next week:

SunMonTueWedThuFriSat
 

<template>
  <div class="uiv">
    <date-picker v-model="date" :limit-from="limitFrom" :limit-to="limitTo" />
  </div>
</template>
<script>
export default {
  data() {
    const today = new Date()
    const nextWeek = new Date()
    nextWeek.setDate(nextWeek.getDate() + 7)
    return {
      date: null,
      limitFrom: today,
      limitTo: nextWeek,
    }
  },
}
</script>

# Week starts

Change the starting day of the week. Support 0 (Sunday) ~ 6 (Saturday).

MonTueWedThuFriSatSun
 

<template>
  <div class="uiv">
    <date-picker v-model="date" :week-starts-with="1" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: null,
    }
  },
}
</script>

# Week numbers

SunMonTueWedThuFriSat
52
1
2
3
4
5 


<template>
  <section class="uiv">
    <date-picker v-model="date" week-numbers />
    <br />
    <alert v-show="date" type="info"
      >You selected <b>{{ date }}</b
      >.</alert
    >
  </section>
</template>
<script>
export default {
  data() {
    return {
      date: null,
    }
  },
}
</script>

# With dropdown


  • SunMonTueWedThuFriSat
     

<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 slot="dropdown">
        <li>
          <date-picker v-model="date" />
        </li>
      </template>
    </dropdown>
  </form>
</template>
<script>
export default {
  data() {
    return {
      date: 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">
    <date-picker v-model="date" :date-class="dateClass" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: null,
    }
  },
  methods: {
    dateClass(date) {
      return date.getDay() === 0 ? 'btn-sunday' : ''
    },
  },
}
</script>
<style lang="less">
.btn-sunday.btn-default,
.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 (opens new window)

# 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.
locale Object The locale used for translating month and weekday names, clear-btn and today-btn texts.

← TimePicker →