calendar vue日期选择组件

重要

介绍

一个选择日期的vue组件

基于vue2.0

######注：此组件是在jamielhf的基础上进行改造的

新组件增加对自定义列表的支持

   this.$picker.show({
    theme: 'aaa',
    type: 'text',
    date: "本月",
    dataList: [ // 自定义列表格式
      {
        name: "今日",
        id: 0
      },
      {
        name: "本月",
        id: 1
      },
      {
        name: "本年",
        id: 2
      }
    ],
    onOk: (value) =>{
      if(typeof value === 'object') {
        this.date = value.name
      }
    }
  });

demo展示&&项目中的使用

目录结构

demo 用vue-cli 的webpack构建的，加了publish的文件,在发布npm的时候

 　|--dist　build生成的目录
　|--doc   展示图片
  |--lib   publish 之后的文件，发布到npm用
　|--src
　　　|--assets 资源
　　　|--components
　　　　　|--Picker    日期组件
　　　　　|--PickerItem  滚动的子组件
      |--modules 插件的js
　　　|--css
　　　|App.vue   入口
　　　|main.js

组件使用

安装

 npm i vue-water-calendar --save

初始化

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

使用

  <script>

 export default {
   name: 'App',
   data(){
       return{
           date:'',
           date2:'2010-3-2'
         }
   },
   methods:{
     setDate(){

       this.$picker.show({
         type:'datePicker',
         onOk: (date) =>{
           this.date = date
         }
       });

     },
     setDate2(){

       this.$picker.show({
         type:'datePicker',
         date:this.date2,  //初始化时间
         endTime:'2020-02-11',  //截至时间
         startTime:'2010-02-11',  //开始时间
         onOk:(e)=>{
           this.date2 = e;
         },

       })

     },

   },

 }
 </script>