uniapp u-picker操作

<text class="font-28 font-bold">
       <u-picker v-model="date_show" mode="time" :default-time='date_value' :params="date_params" @confirm="date_confirm"></u-picker>
       <view class="flex font-30 font-bold" @click="date_show = true">
              <div>
            {{date_title}} <text class="font-20 ml20">{{date_text}}</text> </div> </view> </text>

js中data参数

  data() {
        return {
            date_text:'今天',//今天
            date_title:'',//时间选择
            date_value:'',//时间选择
            date_show: false,//年月-展示
            date_params: {
                year: true,
                month: true,
                day: true,
                hour: false,
                minute: false,
                second: false
            },
        }
    },

onLoad中设置默认

    onLoad(options) {
        
        var date = new Date();
        var date_year= date.getFullYear();
        var date_month = date.getMonth() + 1;
        var date_date=date.getDate(); 
        this.date_title=date_month+''+date_date+'';
        
    },
    

methods中方法

methods: {
        //时间选择确定
        date_confirm(e){
            var chooseday = e.year+'-'+e.month+'-'+e.day;
            //console.log(chooseday);
            chooseday = new Date(chooseday).getTime();
            var date = new Date();
            var date_year= date.getFullYear();
            var date_month = date.getMonth() + 1;
            //date_month=(date_month/Math.pow(10,2)).toFixed(2).substr(2);
            var date_date=date.getDate(); 
            //date_date=(date_date/Math.pow(10,2)).toFixed(2).substr(2);
            var  today = date_year+'-'+date_month+'-'+date_date;
            // console.log(today);
            today = new Date(today).getTime();
            // console.log(chooseday);
            // console.log(today);
            if(chooseday >= today){
                this.date_value= e.year+'-'+e.month+'-'+e.day;
                this.date_title=e.month+''+e.day+'';
                
                //获取当月的天数
                var diffValue = chooseday - today;
                var d=1000 * 60 *60 *24;
                var date_text=parseInt(diffValue/d);
                if(date_text==0){
                    this.date_text='今天';
                }else if(date_text==1){
                    this.date_text='明天';
                }else{
                    this.date_text=date_text+'天后';
                }
                
            }else{
                uni.showToast({
                    title:'选择日期不能小于今日',
                    icon:'error'
                })
                return false;
            }
            
            
        },
}

效果图

 

posted @ 2024-04-26 11:37  zhang_you_wu  阅读(40)  评论(0编辑  收藏  举报