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或...
·
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年前的任何月份和日期。
怀旧 (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生日日期选择
更多推荐
已为社区贡献25条内容
所有评论(0)