实现一个自己的日期选择器

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 941 | 阅读时长 ≈ 1 分钟

未完待续

首先谈谈要做成的效果

  • 日期选择器一般应用在什么地方呢？
    • 当我们填信息需要填日期的时候，用户希望能够更直观的选择出日期，而作为开发者则希望
    • 日期的格式是一定的
  • 那么大概的样式就出来了，一个输入框，当鼠标点击的时候弹出日期，选择完日期以后则将选择的日期显示在输入框中
    效果图

样式的实现

  • 看上图可以发现这主要包括两部分内容
    • 1.input框，这个input框是一直存在的，没什么特别的样式，修改下border-radius和修改默认蓝色outline，用Box-shadow来定义自己的点击效果，使其更加适应整体色调
    • 2.一个div，里面包括两部分内容，一个可以左右切换月份的年月显示模块，一个table显示日期，可以先用静态数据填上
  • 具体的样式就不细说了主要来看js部分

功能的实现

  • 1.可以打开windows的日历看看，会发现不管一个月有几天，一张table都会用6 * 7的行列数来表示，所以我们的日历行列也定死为6 * 7
  • 2.首先，我们需要用到js中的Date()对象，下面是几个会用到的API
    1.Date(year, month, date),该对象接收三个参数，分别是年，月，日(特别要注意的是月份是0-11,而date为0代表上个月最后一天)，默认返回当前时间的Date对象
2.Date.getFullYear()获取年份
3.Date.getDate()获取日期
4.Date.getMonth()获取月份
5.Date.getDay()获取星期，我们都知道欧美周日算一周的第一天，所以是0-6，0表示周日，这里需要注意下
  • 3.知道怎么获取数据之后接下来就是关键部分，怎么让这42个日期在一张table中正确显示呢？
    1.我需要知道本月第一天的完整数据，Date(year, month-1, 1),这里的month是我们认为的month,因为其接收的是
0-11,所以需要减去1
2.我们需要知道上月最后一天的完整数据，Date(year, month-1, 0),之前也提到0表示上个月最后一天，这是因为在接收到0这个参数以后相当于回退一天
3.我们需要知道本月最后一天的完整数据，Date(year, month, 0),可以利用下个月的month回退来货得这个月的最后一天
    1. 这个坑留在这一个月没更新了，这周末要是不加班一定更新
求打赏