datepicker怎么使用-js教程-PHP中文网

这次给大家带来datepicker怎么使用，使用datepicker的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

写插件是很有意思，也很锻炼人，因为这个过程中能发现许多的细节问题。在前端发展的过程中，jQuery无疑是一个重要的里程碑，围绕着这个优秀项目也出现了很多优秀的插件可以直接使用，大大节省了开发者们的时间。jQuery最重要的作用是跨浏览器，而现在浏览器市场虽不完美，但已远没有从前那么惨，数据驱动视图的思想倍受欢迎，大家开始使用前端框架取代jQuery，我个人比较喜欢Vue.js，所以想试着用Vue.js写一个组件出来。

为了发布到npm上，所以给项目地址改名字了，但是内部代码没有改，使用方法比之前方便。

GitHub地址: Here

功能&期望

这个datepicker目前仅实现了一些常用的功能：

选择时间(这话说得有点多余)
最大/最小时间限制
中/英文切换(其实也就星期和月份需要切换)
可以以.vue形式使用，也可在浏览器环境中直接使用
没了。。。

目录结构

万事的第一步依然是创建项目，只是单一组件，结构并不复杂，Datepicker.vue是最重要的组件文件，dist是webpack的输出文件夹，index.js是webpack打包的入口文件，最后是webpack的配置文件，用来对我们的库文件进行打包用的。因此项目结构就是这样：

.
├── Datepicker.vue
├── LICENSE
├── README.md
├── dist
│ └── vue-datepicker.js
├── index.js
├── package.json
└── webpack.config.js

登录后复制

从Datepicker.vue入手

以.vue的方式写Vue组件是一种特殊写法，每个Vue文件包括template, script, style三部分，template最好不要成为片段实例,所以最外层先套一层p，当做整个组件的根元素。一个datepicker一般由两部分组成，一个用来显示日期的input框，一个用来选择日期的panel，因为我发现input在移动端会自动唤起键盘，所以没有使用input，直接用了p模拟,通过点击事件决定panel的显隐。value是最终的结果，需要和父组件通信，所以将value写成了prop，在父组件中使用value.sync="xxx"，datepicker的value就和父组件的xxx双向绑定了。

<template>
 <p>
  </p>
<p>
 </p>
 <p>
 </p>
</template><scrip>
 export default {
  data () {
   return {
    panelState: false //初始值，默认panel关闭
   }
  },
  props: {
   value: String
  }
 }
</scrip>

登录后复制

渲染日期列表

一个月最少是28天，如果把周日排在开头，那么最少(1号恰好是周日)需要4行，但是每个月天数30，31居多，而且1号又不一定是周日，我索性干脆按最多的情况设计了，共6行，当月日期没填满的地方用上个月或下个月的日期补齐，这样就方便计算了，而且切换月份时候panel高度不会变化。日期列表的数组需要动态计算，Vue提供了computed这个属性，所以直接将日期列表dateList写成计算属性。我的方法是将日期列表固定为长度为42的数组，然后将本月，上个月，下个月的日期依次填充。

computed: {
 dateList () {
  //获取当月的天数
  let currentMonthLength = new Date(this.tmpMonth, this.tmpMonth + 1, 0).getDate()
  //先将当月的日期塞入dateList
  let dateList = Array.from({length: currentMonthLength}, (val, index) =&gt; {
   return {
    currentMonth: true,
    value: index + 1
   }
  })
  //获取当月1号的星期是为了确定在1号前需要插多少天
  let startDay = new Date(this.year, this.tmpMonth, 1).getDay()
  //确认上个月一共多少天
  let previousMongthLength = new Date(this.year, this.tmpMonth, 0).getDate()
 }
 //在1号前插入上个月日期
 for(let i = 0, len = startDay; i <p style="text-align: left;">这里用Array.from来初始化了一个数组，传入一个Array Like，转化成数组，在拼接字符串时候采用了arr[arr.length]和[{}].concat(arr)这种方式，因为在JsTips上学到这样做性能更好，文章的最后会贴出相关链接。<br>这样，日期列表就构建好了，在template中使用v-for循环渲染出来</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">

登录后复制