html生日日期选择_日期选择器，用于遥远的日期，例如生日

html生日日期选择

vueBirthDatepicker (vueBirthDatepicker)

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

日期选择器，用于遥远的日期，例如生日。 只需单击三下即可选择20或50年前的任何月份和日期。

View demo 查看演示 Download Source 下载源

怀旧 (Istallation)

npm i vue-birth-datepicker --S

纳入应用 (Inclusion to app)

导入ES6 (Import ES6)

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

导入.vue单个文件组件 (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.

在这种情况下，不需要单独包含样式。 构建系统中需要的Vue加载器和Scss加载器。

浏览器 (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 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.
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

属性	类型	默认值	描述
valueIsString	布尔值	假	如果为“ true”，则值是取决于其他属性的格式的字符串，默认情况下为“ 1990.12.31”。 如果“ false”值是本地日期00小时00分钟的unix毫秒时间戳。
排队	布尔值	假	如果为“ true”，则小部件显示为内联块元素。 否则作为带有打开下拉菜单的输入。
高	布尔值	假	高下拉菜单视图。 如果为“ true”，则月份和天数高于年份。 否则全部排成一排。
hideHeader	布尔值	假	如果为“ true”，则不会显示下拉列表中的标题。
closeOnSet	布尔值	假	如果为“ true”，则选择后将自动关闭下拉菜单。 在“内联”模式下不起作用。
占位符	串	''	输入占位符。 在“内联”模式下不起作用。
通配符	串	'_'	小部件标题中的字符而不是日期，如果未选择则显示。
附件	串	'左下方'	下拉菜单的位置。 在“内联”模式下不起作用。
yearFirst	布尔值	假	如果为“ true”，则日期将显示为“ 1970.12.31”，否则显示为“ 31.12.1970”
定界符	串	'。	数字之间的符号
maxYear	数	今年	可显示和选择的最大年份值。 未定义意味着无限。
年	数	未定义	可供选择的最小年份值。 未定义意味着无限。
地区	字符串，数组	'en'	月份名称。 嵌入英语和俄语语言环境，因此您可以指定“ en”或“ ru”。 您可以将月份名称作为数组提供，以一月名称开头

翻译自: https://vuejsexamples.com/date-picker-for-distant-dates-such-as-birthday/

html生日日期选择