介绍

一个选择日期的vue组件
基于vue2.0
修改了之前版本依赖vuex，现在比较插件化 支持npm,更方便使用 。
想自己做vue插件的朋友也可以看下里面的实现的代码
github地址 https://github.com/jamielhf/vue/tree/master/calendar
我的博客地址 http://jamielhf.cn

demo展示&&项目中的使用

<img width = "384" src="http://upload-images.jianshu.io/upload_images/3652052-623d4dc0a7d3e077.gif?imageMogr2/auto-orient/strip"/>
<img width = "300" src="http://upload-images.jianshu.io/upload_images/3652052-051c7c9bc6d96b2e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/>

目录结构

demo 用vue-cli 的webpack-simple构建的

calendar
　|--dist　build生成的目录
　|--doc   展示图片
　|--src
　　　|--assets 资源
　　　|--components
　　　　　|--calendar    日期组件
　　　　　|--dateScroll  滚动的子组件
　　　|--css
　　　|App.vue   入口
　　　|main.js   

组件使用

安装

npm i vue2-datepick --save

初始化

import Calendar from 'vue2-datepick';
Vue.use(Calendar);

使用

   <template>
     <div id="app">
       <p @click = "setDate" >点击设置日期（默认今天）</p>
       <p @click = "setDate2" >设定指定的日期（20150220）</p>
   
     <p>{{data}}</p>
     </div>
   </template>
   
   <script>
   
   
   export default {
     name: 'app',
     data () {
       return {
           data:'日期'
       }
     },
   
     methods:{
   
      setDate(){
          let vm = this;
         this.$calendar.show({
             onOk(data){
                 console.log(data)
                 vm.data= data.year+'-'+data.month+'-'+data.day;
                 console.log('确定')
             },
             onCancel(){
                 console.log('取消')
             }
         })
       },
         setDate2(){
             let vm = this;
             this.$calendar.show({
                 onOk(data){
                     vm.data= data.year+'-'+data.month+'-'+data.day;
                     console.log('确定')
                 },
                 onCancel(){
                     console.log('取消')
                 },
               year:2015,
               month:2,
               day:20,
             })
         }
     },
   }
   </script>

默认的年份是 1900 - 2050 如果需要可以在调用的时候传入参数

  this.$calendar.show({
         startYear:2000,
        endYear:2010,
     })

版本

1.0.4 更改初始化的代码