vue2-datepick

3.0.11 • Public • Published

calendar vue日期选择组件

重要

最新的版本可能跟之前的调用方法有点不同,升级的时候请看下面的调用方法

介绍

一个选择日期的vue组件

基于vue2.0

修改了之前版本依赖vuex,插件化 支持npm

github地址 https://github.com/jamielhf/vue/tree/master/calendar

我的博客地址 http://jamielhf.cn

demo展示&&项目中的使用

在线demo地址:https://jamielhf.github.io/vue/calendar/dist/

目录结构

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 vue2-datepick --save

初始化

import Calendar from 'vue2-datepick';
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>
 
 
 
 

版本

3.0.11 修复bug 3.0.10 修改返回日期的格式 3.0.9 修改日期范围的bug 3.0.7 修改ios下的bug 3.0.6 新增开始时间的限制 startTime 3.0.5 修改bug
3.0.4 修改样式不居中的问题
3.0.0 修复之前的部分bug,还有样式的问题,现在是用vw做单位所以可能在低版本的手机会不兼容
2.1.0 添加了endTime终止的时间,更新了vue的版本
2.0.4 点击背景可以关闭
2.0.0 修复之前的日期没有联动的bug,重构了一次
1.0.4 更改初始化的代码

Dependencies (2)

Dev Dependencies (38)

Package Sidebar

Install

npm i vue2-datepick

Weekly Downloads

19

Version

3.0.11

License

none

Unpacked Size

105 kB

Total Files

38

Last publish

Collaborators

  • jamielhf