首页 > 其他分享 >uniapp u-picker操作

uniapp u-picker操作

时间:2024-04-26 11:44:56浏览次数:24  
标签:picker uniapp text month date chooseday var 操作 today

<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中设置默认

    onl oad(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;
            }
            
            
        },
}

效果图

 

标签:picker,uniapp,text,month,date,chooseday,var,操作,today
From: https://www.cnblogs.com/zhangyouwu/p/18159711

相关文章

  • MongoDB基础操作
    目录一、什么是MongoDB二、MongoDB与关系型数据库对比三、数据类型四、部署MongoDB1、下载二进制包2、下载安装包并解压3、创建用于存放数据和日志的目录,并修改权限4、启动MongoDB4.1前台启动4.2后台启动4.3、配置文件启动服务4.4、配置systemd服务4.5、systemctl启动MongoDB5、......
  • ES: 数据增,删,改,批量操作
    参考文章:https://blog.csdn.net/zhuchunyan_aijia/article/details/129461431 1>指定id新增_id=1新增一条,此命令重复执行,就是更新id=1的数据POSTemployee_zcy/_doc/1{"uid":"1234","phone":"12345678909","message"......
  • 【Qt 专栏】Qt:SQLite数据库操作示例
    转载自:https://blog.csdn.net/qq_40344790/article/details/129521573作者:DevFrank(CSDNC/C++ 优质创作者)1. sqlite介绍SQLite 是一种轻量级的嵌入式关系型数据库管理系统,它是一个开源的、零配置的、自包含的、事务性的SQL数据库引擎。SQLite的设计目标是简单、高效、可......
  • kvm基本操作命令
    1.查看虚拟机列表virshlist2.查看正在运行的虚拟机列表virshlist--all3.查看所有虚拟机virshlist--all4.查看虚拟机详细信息域virshdominfo[虚拟机名称]5.虚拟机域的开关机操作virshstart[虚拟机名称](开机)virshshutdown[虚拟机名称](温柔的关机)virshshutdo......
  • pyclipper的多边形操作(转载)
    等距离缩放多边形:参考博客:https://blog.csdn.net/jizhidexiaoming/article/details/134435885 文本检测DBnet中对标签的预处理里面需要用到这个操作:将文本标注框等距离缩放用于生成标签二值图像和阈值图像,如下所示: 备注:上图出自Dbnet论文原来python有个库pyclipper自带这......
  • Docker - 基本概念、与虚拟机的区别、架构、镜像操作、容器操作、数据卷挂载
    Docker-基本概念、与虚拟机的区别、架构、镜像操作、容器操作、数据卷挂载 一、对Docker 的理解1、Docker基本概念我们平时开发大型项目组件较多,依赖关系复杂,环境差异大,通过Docker就可解决上述问题~ Docker就是一个快速交付应用、运行应用的技术:运行前后:......
  • stm32操作SD卡
       https://item.taobao.com/item.htm?spm=a1z09.2.0.0.b1212e8dOgRcLN&id=39107244481&_u=p1qf7bf52f08     /*SDcardbasicfileexampleThisexampleshowshowtocreateanddestroyanSDcardfileThecircuit:SDcardattachedto......
  • MFT(Master File Table,主文件表)是Windows操作系统中NTFS(New Technology File System,新
    MFT(MasterFileTable,主文件表)是Windows操作系统中NTFS(NewTechnologyFileSystem,新技术文件系统)的关键组成部分,用于存储文件和目录的元数据信息。MFT类似于Unix和Linux系统中的inode,但在实现上有所不同。MFT包含以下信息:文件和目录的属性:包括权限、所有者、创建时间、修......
  • PEcmd是一个命令行工具,用于执行各种操作系统和文件系统相关的任务。通常,它用于在Windo
    PECMD命令帮助-PECMD技术社区:www.pecmd.netPEcmd是一个命令行工具,用于执行各种操作系统和文件系统相关的任务。通常,它用于在Windows操作系统上执行各种文件和目录操作,例如文件复制、移动、删除等。PEcmd提供了一种简单而强大的方式来管理文件和目录,尤其是在自动化和批处......
  • inode(index node)是Unix、Linux和类Unix操作系统中的一个重要概念, 在Windows操作系统中
    inode(indexnode)是Unix、Linux和类Unix操作系统中的一个重要概念,用于描述文件系统中的文件或目录。每个文件或目录都与一个inode相关联。inode包含以下信息:文件或目录的权限(读、写、执行)。文件类型(普通文件、目录、符号链接等)。拥有者和所属组。文件的大小。访问、修......