微信小程序时间弹窗——年月日时分

news2024/11/27 20:37:09

在这里插入图片描述

需求

  • 1、默认当前时间
  • 2、选择时间弹窗限制最大值、最小值
  • 3、每次弹起更新最大值为当前时间,默认值为上次选中时间
  • 4、== minDate: new Date(2023, 10, 1).getTime(),也可以传入时间字符串new Date('2023-10-1 12:22').getTime() ==

html

  	 <view class="flex bb ptb-12">
        <view><text class="red">* </text>处理时间:</view>
        <view class="flex1 size-28" bindtap="chooseTime">
          <view class="mr-8">{{ququ2?ququ2:'请选择'}}</view>
          <van-icon name="arrow" />
        </view>
     </view>
     
  <!-- 弹窗 -->
  <van-popup show="{{ isShowPop }}" bind:close="onClosePop" position="bottom">
    <van-datetime-picker title="处理时间" formatter="{{formatter}}" value="{{ currentDate  }}" bind:confirm="confirmPop" bind:cancel="onClosePop" min-date="{{minDate}}" max-date="{{maxDate}}" />
  </van-popup>

data

  	ququ2: '',
    isShowPop: false,
    currentDate: new Date().getTime(),
    minDate: new Date(2023, 10, 1).getTime(), //也可以传入时间字符串new Date('2023-10-1 12:22').getTime()
    maxDate: new Date().getTime(),
    formatter: function (type, value) {
      if (type === 'year') {
        return `${value}`;
      } else if (type === 'month') {
        return `${value}`;
      } else if (type === 'day') {
        return `${value}`;
      } else if (type === 'hour') {
        return `${value}`;
      } else if (type === 'minute') {
        return `${value}`;
      }
      return value;
    },

方法

// -----------选择时间弹窗---------
  chooseTime() {
    this.setData({
      maxDate: new Date().getTime(),
      // new Date('2023-10-1 12:22').getTime() 回显当前选中的时间,否则显示当前时间
      currentDate: this.data.ququ2 ? new Date(this.data.ququ2).getTime() : new Date().getTime(),
      isShowPop: true
    })
  },
  confirmPop(e) {
    // console.log(e, 'e', this.formatTimestamp(e.detail))
    this.setData({
      ququ2: this.formatTimestamp(e.detail),
      isShowPop: false
    })
  },
  onClosePop() {
    this.setData({
      isShowPop: false
    })
  },
  // 选中的时间戳处理成  2014-12-23 12:11 格式
  formatTimestamp(timestamp) {
    var date = new Date(timestamp);
    var year = date.getFullYear();
    var month = date.getMonth() + 1; // 月份是从0开始的,所以需要加1
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();

    // 格式化时间为字符串
    // 确保月和日是两位数
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;

    return `${year}-${month}-${day} ${hour}:${minute}`;
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2227805.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ffmpeg视频滤镜:膨胀操作-dilation

滤镜介绍 dilation 官网链接 > FFmpeg Filters Documentation 膨胀滤镜会使图片变的更亮&#xff0c;会让细节别的更明显。膨胀也是形态学中的一种操作&#xff0c;在opencv中也有响应的算子。此外膨胀结合此前腐蚀操作&#xff0c;可以构成开闭操作。 开操作是先腐蚀…

【Spring框架】Spring框架的开发方式

目录 Spring框架开发方式前言具体案例导入依赖创建数据库表结构创建实体类编写持久层接口和实现类编写业务层接口和实现类配置文件的编写 IoC注解开发注解开发入门&#xff08;半注解&#xff09;IoC常用注解Spring纯注解方式开发 Spring整合JUnit测试 Spring框架开发方式 前言…

Mac开发环境配置- Shell/Homebrew/ruby

前言 从 macOS Catalina 开始&#xff0c;Mac 使用 zsh 作为默认登录 Shell 和交互式 Shell。当然你也可以修改默认Shell&#xff0c;但一般没这个必要。而实际开发中经常会遇到一些环境问题导致的报错&#xff0c;下面我们就讲一下一些常用库的环境配置以及原理。 一、Homeb…

苹果转向 Apple Silicon,Intel Mac 的支持时限倒计时

苹果已完成将 Mac 过渡至自家研发的 Apple Silicon 芯片&#xff0c;在过渡期间&#xff0c;苹果迅速停止对 Intel Mac 的新版本 macOS 的支持。 苹果通常为大多数设备提供约 5 年的软件更新。仍在使用 Intel 芯片的 Mac 机型包括&#xff1a; 2019 年款 Mac Pro2018 年款 Ma…

C++ TensorRT yolov8推理 CUDA核函数加速前处理

目录 效果 4K视频 CPU前处理效果 4K视频 CUDA核函数前处理效果 2K视频 CUDA核函数前处理效果 1080P 视频 CUDA核函数前处理效果 模型 电脑环境 项目 代码 下载 效果 C TensorRT yolov8推理 CUDA核函数加速前处理 4K视频 CPU前处理效果 4K视频 CUDA核函数前处理效果 …

自动化测试覆盖率提升的关键步骤

自动化测试覆盖不足的问题可以通过增加测试用例的数量和质量、引入代码覆盖率分析工具、加强团队的测试意识和技能、优化测试框架和工具、自动化测试与手动测试相结合等方式来解决。其中&#xff0c;引入代码覆盖率分析工具是关键&#xff0c;它可以帮助我们精准地识别未被测试…

STM32-Cube定时器TIM

一、内部时钟源 1、创建项目 File → New → STM32 project选择STM32F103C8T6单片机&#xff0c;命名TIM 2、配置单片机 1.打开USART1&#xff0c;方便我们与电脑连接查看数据 开启UART1并开启中断。 2、设置时钟源 开启外部高速晶振 将时钟频率设置为72MHz 设置调试模…

TCP全连接队列与 tcpdump 抓包

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;计算机网络高效通关之路 欢迎大家点赞收藏评论&#x1f60a; 目录 listen第二个参数详解 全连接队列与半连接队列半开放连接队列&#xff08;SYN队列&#xff09;全连接队列&#xff08;接受队列…

构建灵活、高效的HTTP/1.1应用:探索h11库

文章目录 构建灵活、高效的HTTP/1.1应用&#xff1a;探索h11库背景这个库是什么&#xff1f;如何安装这个库&#xff1f;库函数使用方法使用场景常见的Bug及解决方案总结 构建灵活、高效的HTTP/1.1应用&#xff1a;探索h11库 背景 在现代网络应用中&#xff0c;HTTP协议是基础…

Linux 安装MySQL(Cenots版本)

在Linux下安装mysql有很多方法&#xff0c;比如说&#xff1a; 压缩包解压&#xff08;一般为tar.gz&#xff09; 编译好的安装包&#xff08;RPM、DPKG等&#xff09; 在线安装&#xff08;YUM、APT等&#xff09; 在centos环境中&#xff0c;我们一般都用yum源安装。 一 删除…

2. Flink快速上手

文章目录 1. 环境准备1.1 系统环境1.2 安装配置Java 8和Scala 2.121.3 使用集成开发环境IntelliJ IDEA1.4 安装插件2. 创建项目2.1 创建工程2.1.1 创建Maven项目2.1.2 设置项目基本信息2.1.3 生成项目基本框架2.2 添加项目依赖2.2.1 添加Flink相关依赖2.2.2 刷新项目依赖3. 编写…

Docker使用-在Maven里面配置阿里云容器镜像仓库

准备环境 1.安装Dockerdesktop 参考文章&#xff1a;Docker Desktop安装 2.Windows 环境 3.IdeaMaven 4.阿里云容器镜像仓库.阿里云容器镜像仓库 5.SpringBoot 例子 通过网盘分享的文件&#xff1a;springboot-docker-demo.zip 链接: https://pan.baidu.com/s/1MD0uI1HG9SjYv…

群控系统服务端开发模式-应用开发-业务架构逻辑开发Redis封装

Redis是现代互联网开发世界不可缺少的一部分&#xff0c;比如登录token过期时间、系统配置等场所必用。 一、安装Redis扩展 composer require predis/predis 二、设置Redis参数 在根目录下config文件夹中找到cache.php文件&#xff0c;然后在stores数组下追加redis配置&#…

【机器学习】揭秘XGboost:高效梯度提升算法的实践与应用

目录 &#x1f354; XGBoost 原理 1.1 目标函数确定和树的复杂度介绍 1.2 XGBoost目标函数的推导 1.3 泰勒公式展开 1.4 化简目标函数 1.5 问题再次转换 1.6 对叶子结点求导 1.7 XGBoost的回归树构建方法 &#x1f354; XGBoost API 2.1 通用参数 2.2 Booster 参数 …

太速科技-430-基于RFSOC的8路5G ADC和8路10G的DAC PCIe卡

430-基于RFSOC的8路5G ADC和8路10G的DAC PCIe卡 一、板卡概述 板卡使用Xilinx的第三代RFSOC系列&#xff0c;单颗芯片包含8路ADC和DAC&#xff0c;64-bit Cortex A53系列4核CPU&#xff0c;Cortex-R5F实时处理核&#xff0c;以及大容量FPGA。 对主机接口采用PCIe Gen3x…

SpringBoot篇(运维实用篇 - 临时属性)

目录 一、临时属性设置 1. 简介 2. 属性加载优先级 那是否还有其他的配置方式呢&#xff1f; 3. 知识小结 二、开发环境中使用临时属性 1. 如何操作 2. 知识小结 3. 思考 三、配置文件分类 1. 简介 2. 4个级别 3. 为什么设计多种配置文件&#xff1f; 一个典型的应…

基于SSM+微信小程序的汽车维修管理系统(汽车5)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的汽车维修管理系统实现了三个角色&#xff1a;管理员、员工、用户。 1、管理员实现了首页、管理员管理员、员工管理、用户管理、车辆信息管理、配件管理等 2、员工实…

【51 Pandas+Pyecharts | 深圳市共享单车数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 处理起始时间、结束时间2.4 增加骑行时长区间列2.5 增加骑行里程区间列 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 各…

海亮科技亮相第84届中国教装展 尽显生于校园 长于校园教育基因

10月25日&#xff0c;第84届中国教育装备展示会&#xff08;以下简称“教装展”&#xff09;在昆明滇池国际会展中心开幕。作为国内教育装备领域规模最大、影响最广的专业展会&#xff0c;本届教装展以“数字赋能教育&#xff0c;创新引领未来”为主题&#xff0c;为教育领域新…

Mac 电脑 使用sudo创建项目后,给了读写权限,仍报权限问题

问题&#xff1a;sudo创建的项目&#xff0c;都已经改成读写权限了&#xff0c;但是修改项目中的内容还是报没权限。 原因&#xff1a;当你使用 sudo 创建项目时。这是因为 sudo 会以 root 用户的身份创建文件和目录&#xff0c;这些文件和目录默认属于 root 用户&#xff0c;…