jingNing_H5_Mobile/src/pages/clubCourse/dateTImePicker.vue

<script setup>
const props = defineProps({
  label: {
    type: String,
    default: '',
  },
})

defineExpose({
  getResult
})
function getResult() {
  return result
}
let result = $ref('')
let showDatePicker = $ref(false)
let showTimePicker = $ref(false)

const onDateConfirm = ({ selectedValues }) => {
  result = selectedValues.join('-');
  showDatePicker = false;
  showTimePicker = true
};
const onTimeConfirm = ({ selectedValues }) => {
  result = result + ' ' + selectedValues.join(':');
  showTimePicker = false;
};

let oldResult = ''
const clickPop = () => {
  oldResult = result
  showDatePicker = true
}
const clickCancel = () => {
  result = oldResult
  showDatePicker = false
  showTimePicker = false

}
const currentTime = ref(['12', '00', '00']);
const columnsType = ['hour', 'minute', 'second'];

const minDate = new Date(2010, 0, 1)
</script>
<template>
  <van-field v-model="result" is-link readonly name="datePicker" :label='props.label' placeholder="点击选择时间"
    @click="clickPop" :rules="[{ required: true, message: '请选择时间' }]" />
  <van-popup v-model:show="showDatePicker" position="bottom">
    <van-date-picker :min-date="minDate" @confirm="onDateConfirm" @cancel="clickCancel" />
  </van-popup>
  <van-popup v-model:show="showTimePicker" position="bottom">
    <van-time-picker @confirm="onTimeConfirm" @cancel="clickCancel" v-model="currentTime" title="选择时间"
      :columns-type="columnsType" />
  </van-popup>
</template>