xiamen-sb-uniapp/components/my-calendar/index.vue

<template>
    <view >
        <view class="d-flex a-center j-between">
        <u-input :value="value" disabled :placeholder="placeholder" @tap="handleClick"/>
        <u-button
                            @click="handleClick"
                            type="primary"
                            size="mini"
                        >选择</u-button>
        </view>
        <u-calendar v-model="show" :mode="mode" @change="confirm" max-date="2222-02-02"></u-calendar>
    </view>
</template>

<script>
export default {
  name: 'MyCalendar',
  data() {
    return {
        show:false
    }
  },
  props: {
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled:{
      default:false
    },
    mode:{
      type: String,
      default: 'date'
    },
    value: {
      type: String | Number
    }
  },
  methods: {
    confirm(e) {
      this.$emit('input', String(e.result))
      this.$emit('change', e.result)
      this.show = false
    },
    handleClick(){
      if(this.disabled) return
      this.show=true
    }
  }
}
</script>

<style>

</style>