uni-datetime-picker 组件使用不了（待解决）

<template>
	<view>
		<uni-section title="选择冰箱层数" type="line">
		    <view class="select-box">
		        <uni-data-select
		            v-model="selectedLocationId"
		            :localdata="locations"
		            @change="onRefrigeratorChange"
		        >
		        </uni-data-select>
		    </view>
		</uni-section>	
		<uni-section title="输入食材名称" type="line">
			<view class="input-box">
			   <uni-easyinput class="uni-mt-5" trim="all" v-model="foodName" placeholder="请输入食材名称" @input="onNameInput"></uni-easyinput>
			</view>
		</uni-section>
		<uni-section title="输入食材数量" type="line">
			<view class="input-box">
			   <uni-easyinput class="uni-mt-5" trim="all" v-model="foodQuantity" placeholder="请输入食材数量（如：5个，2kg）" @input="onQuantityInput"></uni-easyinput>
			</view>
		</uni-section>
		<uni-section :title="'选择保质期截止日期：' + single" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 引入组件
import uniSection from "@dcloudio/uni-ui/lib/uni-section/uni-section.vue";
import uniDataSelect from "@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue";
import uniEasyinput from "@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue"
import uniDatetimepicker from"@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue"
// 注册变量
const locations = ref([]);  // 存储冰箱层数信息
const selectedLocationId = ref('');  // 选中的层数ID
const fridgeId = ref('');  // 冰箱ID
const foodName = ref('');
const foodQuantity = ref('');
const single = ref('');  // 确保有绑定日期值的变量




// 模拟API请求函数，获取冰箱层数信息
const fetchFridgeLocations = async (fridgeId) => {
  // 替换为你的实际API请求
  const response = await uni.request({
    url: `http://localhost:8082/cookieAdmin/query/${fridgeId}`,
    method: 'GET',
  });

 
  // 将数据赋值给 locations
  locations.value = response.data.map(item => ({
    value: item.locationId,
    text: item.locationName
  })); 
  console.log(response.data)
};

const maskClick = () => {
  console.log('日期选择器失焦');
};

 
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  fridgeId.value = options.fridgeId;

  // 获取冰箱层数信息
  fetchFridgeLocations(fridgeId.value);
});

// 处理下拉框选项变更
const onRefrigeratorChange = () => {
  console.log('选中的层数ID:', selectedLocationId.value);
};
</script>

<script>
export default {
  components: {
    uniSection,  // 注册组件
    uniDataSelect,
	uniEasyinput,
	uniDatetimepicker
  }
}
</script>

<style>
.select-box {
  margin: 10px;
}
.input-box{
	margin: 10px;
}
</style>

组件注入失败 uni-datetime-picker无法使用。

  

最后实在无法解决，只能用picker替代 

<template>
	<view>
		<uni-section title="选择冰箱层数" type="line">
		    <view class="select-box">
		        <uni-data-select
		            v-model="selectedLocationId"
		            :localdata="locations"
		            @change="onRefrigeratorChange"
		        >
		        </uni-data-select>
		    </view>
		</uni-section>	
		<uni-section title="输入食材名称" type="line">
			<view class="input-box">
			   <uni-easyinput class="uni-mt-5" trim="all" v-model="foodName" placeholder="请输入食材名称" @input="onNameInput"></uni-easyinput>
			</view>
		</uni-section>
		<uni-section title="输入食材数量" type="line">
			<view class="input-box">
			   <uni-easyinput class="uni-mt-5" trim="all" v-model="foodQuantity" placeholder="请输入食材数量（如：5个，2kg）" @input="onQuantityInput"></uni-easyinput>
			</view>
		</uni-section>
		<uni-section :title="'选择保质期截止日期：' + single" type="line"></uni-section>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 引入组件
import uniSection from "@dcloudio/uni-ui/lib/uni-section/uni-section.vue";
import uniDataSelect from "@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue";
import uniEasyinput from "@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue";

// 注册变量
const locations = ref([]);  // 存储冰箱层数信息
const selectedLocationId = ref('');  // 选中的层数ID
const fridgeId = ref('');  // 冰箱ID
const foodName = ref('');
const foodQuantity = ref('');
const single = ref('');  // 确保有绑定日期值的变量
const date = ref(getDate());  // 默认当前日期

const startDate = computed(() => getDate('start'));
const endDate = computed(() => getDate('end'));

// 模拟API请求函数，获取冰箱层数信息
const fetchFridgeLocations = async (fridgeId) => {
  // 替换为你的实际API请求
  const response = await uni.request({
    url: `http://localhost:8082/cookieAdmin/query/${fridgeId}`,
    method: 'GET',
  });

  // 将数据赋值给 locations
  locations.value = response.data.map(item => ({
    value: item.locationId,
    text: item.locationName
  }));
};

// 获取当前日期
function getDate(type) {
    const date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();

    if (type === 'start') {
        year = year - 60;
    } else if (type === 'end') {
        year = year + 2;
    }

    month = month > 9 ? month : '0' + month;
    day = day > 9 ? day : '0' + day;

    return `${year}-${month}-${day}`;
}

// 处理日期变化
const bindDateChange = (e) => {
    date.value = e.detail.value;
};

// 处理下拉框选项变更
const onRefrigeratorChange = () => {
    console.log('选中的层数ID:', selectedLocationId.value);
};

// 在页面加载时获取冰箱层数
onMounted(() => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.options;
    fridgeId.value = options.fridgeId;

    // 获取冰箱层数信息
    fetchFridgeLocations(fridgeId.value);
});
</script>

<script>
export default {
  components: {
    uniSection,  // 注册组件
    uniDataSelect,
    uniEasyinput,
  }
}
</script>

<style>
.select-box {
  margin: 10px;
}
.input-box {
  margin: 10px;
}
.uni-list{
	margin-right: 10px;
	margin-left: 10px;
	border: 0.5px solid rgb(240, 240, 240);
	font-size: 24rpx;
	color: #999;
	 padding: 30rpx;
}
</style>

 半成品，没接后端，但基本信息都完成了。