uview picker选择器 怎么显示星期

<template>
    <view class="content">
          <view>{{showDate}}</view> 
          <u-picker mode="showDate" 
                    v-model="show" 
                    :params="params" 
                    @confirm="confirmTime">
          </u-picker>     //uview picker选择器
    </view>
</tempalte>
<script>
     export default{
        data(){
            return {
                showDate:'2022-08-08',//默认内容,可以是时间,也可以是提示文字
                show:false,           //是否显示列表
                params: {             //参数配置,如果要显示时、分、秒,将对应的false改为true
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
            }

        },
        methods:{
            confirmTime(e) {
                //可以将e在控制台打印出来看看
				this.showDate= e.year + '-' + e.month + '-' + e.day
                //将选中的日期值 赋值给 d 变量
				var d = new Date(e.year + '-' + e.month + '-' + e.day);
				var weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                //通过调用getDay()方法就能知道当前日期是星期几
				var week = d.getDay()
				console.log(weeks[week]);
				this.time = e.year + '-' + e.month + '-' + e.day + '(' + weeks[week] +')'
			},
        
        }




    }        
</script>

运行结果如下:

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现五级选择,可以使用uView组件库中的Picker组件,并在其内部嵌套多个Picker组件。下面是一个五级选择的示例代码: ```html <template> <view class="picker"> <picker :range="provinceList" @change="provinceChange"></picker> <picker :range="cityList" @change="cityChange"></picker> <picker :range="districtList" @change="districtChange"></picker> <picker :range="streetList" @change="streetChange"></picker> <picker :range="villageList" @change="villageChange"></picker> </view> </template> <script> export default { data() { return { provinceList: ['省份1', '省份2', '省份3'], cityList: ['城市1', '城市2', '城市3'], districtList: ['区县1', '区县2', '区县3'], streetList: ['街道1', '街道2', '街道3'], villageList: ['村庄1', '村庄2', '村庄3'] } }, methods: { provinceChange(e) { // 省份变化时更新城市列表 const index = e.detail.value this.cityList = this.getCityList(index) }, cityChange(e) { // 城市变化时更新区县列表 const index = e.detail.value this.districtList = this.getDistrictList(index) }, districtChange(e) { // 区县变化时更新街道列表 const index = e.detail.value this.streetList = this.getStreetList(index) }, streetChange(e) { // 街道变化时更新村庄列表 const index = e.detail.value this.villageList = this.getVillageList(index) }, villageChange(e) { // 村庄变化时输出最终结果 const index = e.detail.value const province = this.provinceList[index[0]] const city = this.cityList[index[1]] const district = this.districtList[index[2]] const street = this.streetList[index[3]] const village = this.villageList[index[4]] console.log(`${province}-${city}-${district}-${street}-${village}`) }, getCityList(provinceIndex) { // 根据省份获取城市列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['城市1', '城市2', '城市3'] }, getDistrictList(cityIndex) { // 根据城市获取区县列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['区县1', '区县2', '区县3'] }, getStreetList(districtIndex) { // 根据区县获取街道列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['街道1', '街道2', '街道3'] }, getVillageList(streetIndex) { // 根据街道获取村庄列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['村庄1', '村庄2', '村庄3'] } } } </script> <style> .picker { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } </style> ``` 在上面的代码中,我们使用了五个Picker组件,分别对应省份、城市、区县、街道、村庄五个级别。每当用户选择某个级别的选项时,我们会根据该级别的值更新下一个级别的选项列表。当用户选择最后一个级别时,我们会输出最终的选择结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值