基于 Vue 2.x 的日期选择组件

在前端开发中,日期选择是一个常见的需求。Vue 2.x 提供了方便的组件化开发方式,可以很容易地实现自定义的日期选择组件。

实现思路

我们可以将整个日期选择器分为三个部分:年份选择、月份选择和日期选择。首先需要确定日期选择器所支持的日期范围,然后根据日期范围计算出可选的年份和月份。通过点击不同的按钮或者滑动可以切换当前显示的年份和月份。最后用户选择具体日期后,将其保存到父组件中。

组件结构

----------
  ---- --------------------
    ---- ---------------
      ------- -----------------------------------
      ------- --------------------------------
      ----- --------------- -------- ---------
      ----- ---------------- --------- ---------
      ------- --------------------------------
      ------- -----------------------------------
    ------
    ---- -------------
      ---- ------------ ------ -- ----- ------------ --------- --------------- ------------ ----- -------- --------
    ------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ----- -------
      --------- ----
    --
    ---------- -
      ----- -------
      --------- ------
      -------- ----
    --
    -------- -
      ----- -------
      --------- ------
      -------- --- --------------------
    -
  --

  ------ -
    ------ -
      --------- -------------------------------- ----
      ---------- -------------------------------- ----
      --------- -------------------------------- -----
      ----- --
    --
  --

  --------- -
    ----------------
  --

  ------ -
    ---------- -
      ------------- - ------------------------- ----
      -------------- - ------------------------- ----
      ------------- - ------------------------- -----
      ------------------
    -
  --

  -------- -
    ---------- -
      --- ---- - - --------------- - -- ------------- ---- -
        ----- ---- - --
        ----- ------ - ---
        --- ---- - - -- - -- --- ---- -
          ----- ----- - --
          ----- ---- - ---
          ----- ----------- - --- ---------- ------ -------------
          ----- -------------- - --- ---------- ----- - -- ------------
          ----- ------------- - --- ---------- ----- - -- ----------------------
          --- ---- - - -- - -- ----------- - ------------------------ - - --------------- ---- -
            --- ---- - - - ---------------
            -- ----- - - -- ---- - ------------ -
              ---- - ---
            -
            ----- ------- - --- -- -------------- -- - - ----------- - ----------------
            -----------
              -----
              -------
            ---
          -
          -------------
            ------
            ----
          ---
        -
        ----------------
          -----
          ------
        ---
      -
    --

    ------------ -
      --- ---- - - -- - - ----------------- ---- -
        ----- ------- - -------------
        -- ------------- --- -------------- -
          ----- ------ - ---------------
          --- ---- - - -- - - -------------- ---- -
            ----- -------- - ----------
            -- --------------- --- --------------- -
              ------------- - ----------------------- --- ------------------- --------------- --------------
              ----- ---- - --------------
              --- ---- - - -- - - ------------ ---- -
                ----- --- - --------
                ----------- - --- - ------------- - - -- - -- ------------- - --- ------------------- --------------- -------------
              -
            -
          -
        -

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------