Skip to content

wumiangithub/datepicker-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

datePicker-vue

基本使用步骤

前端交流群: 602996760

npm install datepicker-vue --save-dev
import date from 'datepicker-vue'

A Vue.js 2.0 移动端滚动时间选择器,兼容各种手机 project
效果图
可选择绑定的四个属性
tipDivText 文字提示信息。 默认为空。         string类型 可以为'出发'等简短文字提示信息'
min         最小时间。     默认今天         string类型 'yyyy-mm-dd'
max         最大时间。     默认为2019-05-20   string类型 'yyyy-mm-dd'
openTime   选中时间。     默认今天。         string类型 'yyyy-mm-dd'
今天是2017.05.20对于单身狗的程序员只能在家撸代码。感觉现在vue的组件比较缺。刚好有时间写了一个。希望对大家有帮助。
如果觉得有用,希望能给一颗星星。您的鼓励是我前行最大的动力。
废话不多说看效果。
绑定tipDivText
效果图
详细使用方法:

<template> 
<date @dateClick="dateClick" @dateBack="dateBack" v-show="dateShow" :max="max" :openTime="openTime" :min="min"></date>
</template> 
<script>
  import date from 'datepicker-vue'
  export default {
  data () {
    return {
      dateShow:false,
      min:'2017-05-20',//最小时间  默认为当前时间  可以不绑定这个属性..一旦绑定必须为yyyy-mm-dd字符串格式
      max:"2018-09-11",//最大时间  不能比最小时间小  可以不绑定这个属性..一旦绑定必须为yyyy-mm-dd字符串格式
      dateTime:'',//选中的时间
    }
  },
  components:{
    date
  },
  methods:{
    dateBack(){//时间插件返回按钮事件
      this.dateShow = false;
    },
    dateClick(msg){//时间插件传给当前页面的时间事件
      this.dateShow = false;
      this.dateTime = msg;
    },
  },
  computed:{
    openTime(){//这是传给时间插件的展示时间。return的这个时间最好保存在vuex中。不然显示的都是今天
      return this.dateTime //this.$store.state.dateTime
    }
  }

}
</script>

About

vue2.0移动端时间选择器

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages