实现一个简单的日历输入组件

日历组件

日历组件在平时项目中是非常常见的一个组件，那么我们就来实现一下。实现之前要知道有哪几个需要注意的点。
-一、日期要怎么显示？
每个月需要展示不同的日期，那么我们就来找找规律吧。
1.每个月需要展示固定的42天。
2.每个月的一号是周几，比如上图中的一号是周二，那么我们可以使用时间的getDay函数获取一号的是2，然后让第一天往前推2天,就是我们需要展示在日历上的第一天了。

• 二、日期框里的年月不能根据输入框里的日期变化，因为后面还会涉及到切换问题
• 三、每次切换都要更新日历板中的日期，使其与对应月份展示的相同
• 四、每次点击日历中的日期需要隐藏日历板（点击切换年月按钮不隐藏）
• 五、点击日历板上的日期之后再次点击输入框会展示对应月份对应时间，对应时间需要给一个特殊展示（如上图蓝色部分）
• 六、不是当月的时间需要和当前月的日期有区分（颜色区分）
• 七、选中了某一天需要更新父组件中的数据
• 八、输入框中录入年月日，点击enter键，再次点击input会弹出对应的日期并且标蓝色

上面就是封装这个日历所需要注意到的点，那么下面看代码吧；

代码实现

父组件

子组件