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