vueBirthDatepicker

Date picker for distant dates, such as birthday. Just three clicks to choose any month and day 20 or 50 years ago.

DEMO

Istallation

npm i vue-birth-datepicker --S

Inclusion to app

Import ES6

import birthDatepicker from 'vue-birth-datepicker';
// include 'vue-birth-datepicker/dist/vueBirthDatepicker.css' into your styles

Import .vue single file component

import birthDatepicker from 'vue-birth-datepicker/src/birth-datepicker';
// if substitution is working:
import birthDatepicker from 'vue-birth-datepicker/vue';

Don't need to include styles separately in this case. Vue-loader and scss loader required in you build system.

Browser

<script src="https://unpkg.com/vue"></script>
<script src="./vueBirthDatepicker.umd.js"></script>
<link rel="stylesheet" href="./vueBirthDatepicker.css">

Usage

<birth-datepicker v-model="date" />

Attributes

Configure datepicker look and behaviour with attributes

attribute	type	default value	description
valueIsString	boolean	false	If "true", value is a string of format depending on other attributes, by default like "1990.12.31". If "false" value is a unix milliseconds timestamp for UTC (not local) date 00 hours 00 minutes.
inline	boolean	false	If "true", widget is shown as inline-block element. Otherwise as an input with opening dropdown.
disabled	boolean	false	Disables input, if "true".
high	boolean	false	High dropdown view. If "true", months and days are above years. Otherwise all in one row.
hideHeader	boolean	false	If "true", no header in dropdown will be shown.
closeOnSet	boolean	false	If "true", dropdown will be automatically closed on select. Does not work in "inline" mode.
placeholder	string	''	Input placeholder. Does not work in "inline" mode.
wildcard	string	'_'	Character in widget header instead of date, shown when is nothing selected.
attachment	string	'bottom left'	Placement of dropdown. Does not work in "inline" mode.
yearFirst	boolean	false	If 'true', date will be displayed like '1970.12.31' otherwise like '31.12.1970'
delimiter	string	'.'	Symbol between digits
maxYear	number	current year	Maximum year value available to display and to choose. Undefined means unlimited.
minYear	number	undefined	Minimum year value available to choose. Undefined means unlimited.
locale	string, array	'en'	Names of months. English and Russian locales are embeded, so you can specify 'en' or 'ru'. You can provide month names as an array, beginning with January name