uni-app中组件picker的基本使用（日期选择器为例）

例：需要在下图“自定义日期”中使用日期选择器

<template>
  <div>
    <picker mode="date" @change="bindDateChange">
      <div :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</div>
    </picker>
  </div>
</template>

<script>
  export default {
    data(){
      return {
	timeIndex:0,
	anyDate:'自定义日期'
      }
     },
      methods:{
	bindDateChange (e) {
	  console.log(e)
	  this.anyDate = e.detail.value
	  this.timeIndex = 4
	},
	changeTime(index) {
	  this.timeIndex = index
	  this.anyDate = '自定义日期'
	  }
	}
  }
</script>

效果图：（单独分出来编辑的）点击自定义日期后显示一下效果，颜色切换为蓝色，当点击图一中的其他按钮时被点击的按钮颜色发生切换，自定义按钮颜色会回复默认（以上代码显示仅如下图所示）

uni-app中组件picker的基本使用（日期选择器为例）

推荐阅读