在前端开发中，日期选择是一个常见的需求。Vue 2.x 提供了方便的组件化开发方式，可以很容易地实现自定义的日期选择组件。
实现思路
我们可以将整个日期选择器分为三个部分：年份选择、月份选择和日期选择。首先需要确定日期选择器所支持的日期范围，然后根据日期范围计算出可选的年份和月份。通过点击不同的按钮或者滑动可以切换当前显示的年份和月份。最后用户选择具体日期后，将其保存到父组件中。
组件结构
-- -------------------- ---- -------
----------
---- --------------------
---- ---------------
------- -----------------------------------
------- --------------------------------
----- --------------- -------- ---------
----- ---------------- --------- ---------
------- --------------------------------
------- -----------------------------------
------
---- -------------
---- ------------ ------ -- ----- ------------ --------- --------------- ------------ ----- -------- --------
------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
--------- ----
--
---------- -
----- -------
--------- ------
-------- ----
--
-------- -
----- -------
--------- ------
-------- --- --------------------
-
--
------ -
------ -
--------- -------------------------------- ----
---------- -------------------------------- ----
--------- -------------------------------- -----
----- --
--
--
--------- -
----------------
--
------ -
---------- -
------------- - ------------------------- ----
-------------- - ------------------------- ----
------------- - ------------------------- -----
------------------
-
--
-------- -
---------- -
--- ---- - - --------------- - -- ------------- ---- -
----- ---- - --
----- ------ - ---
--- ---- - - -- - -- --- ---- -
----- ----- - --
----- ---- - ---
----- ----------- - --- ---------- ------ -------------
----- -------------- - --- ---------- ----- - -- ------------
----- ------------- - --- ---------- ----- - -- ----------------------
--- ---- - - -- - -- ----------- - ------------------------ - - --------------- ---- -
--- ---- - - - ---------------
-- ----- - - -- ---- - ------------ -
---- - ---
-
----- ------- - --- -- -------------- -- - - ----------- - ----------------
-----------
-----
-------
---
-
-------------
------
----
---
-
----------------
-----
------
---
-
--
------------ -
--- ---- - - -- - - ----------------- ---- -
----- ------- - -------------
-- ------------- --- -------------- -
----- ------ - ---------------
--- ---- - - -- - - -------------- ---- -
----- -------- - ----------
-- --------------- --- --------------- -
------------- - ----------------------- --- ------------------- --------------- --------------
----- ---- - --------------
--- ---- - - -- - - ------------ ---- -
----- --- - --------
----------- - --- - ------------- - - -- - -- ------------- - --- ------------------- --------------- -------------
-
-
-
-
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------