简介
vue-birthday-input 是一个能够提供用户选择生日的 Vue 组件库。它可以让你快速的添加生日选择功能，并且支持常用的格式，如年龄、生日、星座等。
安装
在使用 vue-birthday-input 前，你需要先安装该组件。你可以通过 npm 安装：
npm install vue-birthday-input
如何使用
在安装好本组件后，你需要在代码中导入并注册组件。
在全局注册中，你可以这样操作：
import Vue from 'vue';
import VueBirthdayInput from 'vue-birthday-input';
Vue.component('vue-birthday-input', VueBirthdayInput);在局部注册中，你可以这样操作：
import VueBirthdayInput from 'vue-birthday-input';
export default {
components: {
VueBirthdayInput,
},
// ...其他组件配置
};之后你就可以在你的 Vue 组件中使用该组件：
-- -------------------- ---- -------
----------
-----
------------------- ----------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
--------- -----
--
--
-- -------
--
---------属性
该组件有以下属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value / v-model | String / Object | — | 必需 值 |
| placeholder | String | 请选择 | 等待用户选择生日的信息 |
| format | String | date | 输出日期格式 |
| range | Object / String | — | 生日范围 |
value / v-model（必需）
这个是必要属性。你可以绑定一个字符串或日期对象类型的值来获取用户选择的生日信息。例如：
<vue-birthday-input v-model="birthday"></vue-birthday-input>
export default {
data() {
return {
birthday: '1979/4/15',
};
},
// ...其他代码
};placeholder
等待用户给出生日信息的提醒。例如：
<vue-birthday-input placeholder="请选择生日" v-model="birthday"></vue-birthday-input>
format
设置用户选择的生日的输出格式。该属性值可以是下面这些值：
date：标准的YYYY-MM-DD形式timestamp：返回 Unix 时间戳object：返回一个Date对象
默认值是 date。
例如：
<vue-birthday-input format="timestamp" v-model="birthday"></vue-birthday-input>
export default {
data() {
return {
birthday: 3124312323,
};
},
// ...其他代码
};range
设置可以选择的生日范围。该属性可以配置一个字符串值，例如 1979-4-15~2019-4-15，表示生日可以选择从 1979-4-15 到 2019-4-15 之间的任意日期。它也可以配置为一个对象，例如：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
--------- -----
--
--
-- -------
--------- -
------- -
----- --- - --- -------
------ -
---- --- ---------------------- - ---- -- ---
---- ----
--
--
--
--<vue-birthday-input :range="range" v-model="birthday"></vue-birthday-input>
在这个例子中，我们将生日范围设置为当前时间前 100 年到现在之间的所有日期可选。
事件
该组件提供了以下事件：
| 事件名 | 描述 | 回调参数 |
|---|---|---|
| input | 当从组件中获取生日信息时触发 | 调用的生日 |
| change | 当用户切换选择的生日时触发的事件 | 无 |
例如：
-- -------------------- ---- -------
----------
------------------- -------------------- ---------------------- ----------------------------------------
-----------
--------
------ ------- -
------ -
------ -
--------- -----
--
--
-------- -
-------------- -
---------------
--
-------------- -
-----------------
--
-
--
---------以上是 vue-birthday-input 的属性和事件的详细介绍，希望对你有所帮助。
示例
年龄显示
-- -------------------- ---- -------
----------
-----
------------------- ----------------------------------------
----- --- ------
------
-----------
--------
------ ------- -
------ -
------ -
--------- -----
--
--
--------- -
----- -
-- --------------- -
----- ----- - --- -------
----- --------- - --- --------------------
--- --- - ------------------- - ------------------------
----- ----- - ---------------- - ---------------------
-- ------ - - -- ------ --- - -- --------------- - --------------------- -
------
-
------ ----------
- ---- -
------ ---
-
--
--
--
---------星座选择
-- -------------------- ---- -------
----------
-----
------------------- ------------------ --------------------------------------
------- ------------------------
------- -----------------------
------- -------------- ---- -- --------------- --------------- ----- -----------
---------
------
-----------
--------
------ ------- -
------ -
------ -
--------- -----
-------------- ---
------- -----
--------------- -
------------ ------
----------- ------
--------- ------
-------- ------
--------- ------
--------- ------
--------- ------
------ ------
-------- ------
-------- ------
---------- ------
-------------- ------
--
--
--
------ -
-------------- -
----- ----- - --------------- - --
----- --- - ---------------
--- ------
-- ------- --- - -- --- -- --- -- ------ --- -- -- --- -- ---- -
----- - ------------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - -----------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - ---------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - --------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - ---------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - ---------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - ---------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - ------
- ---- -- ------- --- - -- --- -- --- -- ------ --- - -- --- -- ---- -
----- - --------
- ---- -- ------- --- - -- --- -- --- -- ------ --- -- -- --- -- ---- -
----- - --------
- ---- -- ------- --- -- -- --- -- --- -- ------ --- -- -- --- -- ---- -
----- - ----------
- ---- -- ------- --- -- -- --- -- --- -- ------ --- -- -- --- -- ---- -
----- - --------------
-
------------------ - ------
--
--
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739c81e8991b448e98e4