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

Calendar组件Calendar组件在一般的项目中是很常见的组件，所以我们来实现一下。在实施之前，您需要知道您需要注意哪些要点。-1。如何显示日期？每个月都需要显示不同的日期，我们来找找规律。1、每个月需要显示固定的42天。2.每个月的第一天是星期几。比如上图中的第一天是星期二，那么我们可以通过时间的getDay函数得到第一天是2，然后把第一天往前推2天，就是我们需要显示的第一天在日历上。2、日期框里的年月不能根据输入框里的日期来改变，因为后面会涉及到切换问题3、每次切换，日历板里的日期都要更新，使之成为与对应月份显示相同4.每次点击日历中的日期第一次隐藏日历板（点击按钮切换年月不隐藏）5.点击日历板上的日期，再次点击输入框显示对应月份对应的时间，对应时间需要特殊显示（如上图蓝色部分Color部分）6.非当前月份的时间需要从当月日期区分（颜色区分）7.如果选择了某一天，需要更新父组件中的数据8.在输入框中输入年月日，点击回车键，然后再次点击输入会弹出对应的日期和上面的蓝色标记是封装这个日历需要注意的地方，下面看代码；代码实现父组件子组件*{边距：0;填充：0；}ulli{列表样式：无；}#calendar{@commonColor:#00a0ff;文本对齐：居中；显示：内联块；输入{宽度：268px；背景色：#fff；边界半径：4px；边框：1px实心#dcdfe6；颜色：#606266；高度：40px；行高：40px；大纲：无；填充：015px；}.content{用户选择：无；位置：绝对；宽度：300px；z-指数：100；背景：#fff；颜色：#606266；边框：1px实心#e4e7ed；盒子阴影：02px12px0rgba(0,0,0,.1);边界半径：4px；行高：30px；边距：5px0；。标题{显示：弹性；高度：25px；行高：25px；底部边距：15px；.oper{字体大小：16px;游标：指针；弹性：1；}.date{flex:1;}}.week{显示：弹性；border-bottom:1pxsolid#bfc4cc;.week-item{flex:1;字体大小：14px；}}.days{显示：flex;弹性方向：列；填充：5px；字体大小：12px；证明内容：空间均匀；.days-row{显示：flex；.days-item{flex:1;游标：指针；&:hover{颜色：@commonColor;}}}}}.gray-day{颜色：#bfc4cc！重要；}.high-light{颜色：@commonColor；}}