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

在这里插入图片描述

需求

  • 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}`;
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

redis部署手册

文章目录 一、 环境配置资源配置操作系统资源配置服务器1服务器2服务器3 目录规划 二、Redis软件部署2.1 上传相关软件包2.2 安装软件2.3 修改配置文件2.3.1 修改redis.conf2.3.2 修改sentinel.conf2.3.3 启动2.3.4 安装完成 三、Redis的哨兵恢复3.1 现象3.2 解决方法 一、 环境…

SD-WAN分布式组网:构建高效、灵活的企业网络架构

随着企业数字化转型的深入&#xff0c;分布式组网逐渐成为企业网络架构中的核心需求。无论是跨区域的分支机构互联&#xff0c;还是企业与云服务的连接&#xff0c;如何在不同区域实现高效、低延迟的网络传输&#xff0c;已成为业务成功的关键。SD-WAN&#xff08;软件定义广域…

#PCIE#基础知识分解之 CC/SRNS/SRIS 时钟架构

参考资料为PCIe Base Spec和CEM Spec。 1.1 时钟架构分类 PCIe参考时钟的三种架构&#xff1a; Common Refclk (Shared Refclk) ArchitectureData Clocked Rx ArchitectureSeparate Refclk Architecture 下面&#xff0c;我们来简单地聊一聊前面说到的三种参考时钟架构&…

开源一款前后端分离的企业级网站内容管理系统,支持站群管理、多平台静态化,多语言、全文检索的源码

大家好&#xff0c;我是一颗甜苞谷&#xff0c;今天分享一款前后端分离的企业级网站内容管理系统&#xff0c;支持站群管理、多平台静态化&#xff0c;多语言、全文检索的源码。 前言 在当今的数字化时代&#xff0c;企业网站和个人博客已成为信息传播和品牌建设的重要渠道。…

Linux系统基础-多线程超详细讲解(2)_线程控制

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Linux系统基础-多线程超详细讲解(2)_线程控制 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f4…

「C/C++」C/C++ 之 判断语句

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

2024年10月HarmonyOS应用开发者基础认证全新题库

注意事项&#xff1a;切记在考试之外的设备上打开题库进行搜索&#xff0c;防止切屏三次考试自动结束&#xff0c;题目是乱序&#xff0c;每次考试&#xff0c;选项的顺序都不同 这是基础认证题库&#xff0c;不是高级认证题库注意看清楚标题 高级认证题库地址&#xff1a;20…

go语言进阶之并发基础

并发 什么是并发&#xff0c;也就是我们常说的多线程&#xff0c;多个程序同时执行。 并发的基础 线程和进程 进程 进程是操作系统中一个重要的概念&#xff0c;指的是一个正在运行的程序的实例。它包含程序代码、当前活动的状态、变量、程序计数器和内存等资源。进程是系…

迷你航拍高清智能无人机技术详解

迷你航拍高清智能无人机技术是一种结合了高清影像拍摄、智能控制、稳定悬停以及便携性等特点的无人机技术。以下是对该技术的详细解析&#xff1a; 一、技术特点 1. 高清影像拍摄&#xff1a; 高分辨率传感器&#xff1a;迷你航拍无人机通常搭载高分辨率的相机传感器&#xf…

macOS Sonoma 14.7.1 (23H222) Boot ISO 原版可引导镜像下载

macOS Sonoma 14.7.1 (23H222) Boot ISO 原版可引导镜像下载 2024 年 10 月 28 日&#xff0c;Apple 智能今日登陆 iPhone、iPad 和 Mac。用户现可借助 Apple 智能优化写作&#xff0c;为通知、邮件和消息生成摘要&#xff0c;体验交互更自然、功能更丰富的 Siri&#xff0c;使…

QT交互界面:实现按钮运行脚本程序

一.所需运行的脚本 本篇采用上一篇文章的脚本为运行对象&#xff0c;实现按钮运行脚本 上一篇文章&#xff1a;从0到1&#xff1a;QT项目在Linux下生成可以双击运用的程序&#xff08;采用脚本&#xff09;-CSDN博客 二.调用脚本的代码 widget.cpp中添加以下代码 #include &…

玄机-流量特征分析-常见攻击事件 tomcat

简介 在web服务器上发现的可疑活动,流量分析会显示很多请求,这表明存在恶意的扫描行为,通过分析扫描的行为后提交攻击者IP flag格式&#xff1a;flag{ip}&#xff0c;如&#xff1a;flag{127.0.0.1} 找到攻击者IP后请通过技术手段确定其所在地址 flag格式: flag{城市英文小写…

一篇文章入门傅里叶变换

文章目录 傅里叶变换欧拉公式傅里叶变换绕圈记录法质心记录法傅里叶变换公式第一步&#xff1a;旋转的表示第二步&#xff1a;缠绕的表示第三步&#xff1a;质心的表示最终步&#xff1a;整理积分限和系数 参考文献 傅里叶变换 在学习傅里叶变换之前&#xff0c;我们先来了解一…

基于vue框架的的汇生活家居商城的设计与实现bdjlq(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;商品分类,商品信息,用户 开题报告内容 开题报告 项目名称&#xff1a;基于Vue框架的汇生活家居商城的设计与实现 一、项目背景与意义 随着互联网技术的不断发展和普及&#xff0c;电子商务已成为现代商业的重要组成部分。家居商城作…

《高频电子线路》 —— 高频小信号放大器的分类和质量指标

文章内容来源于【中国大学MOOC 华中科技大学通信&#xff08;高频&#xff09;电子线路精品公开课】&#xff0c;此篇文章仅作为笔记分享。 高频小信号放大器的分类和质量指标 分类 质量指标 增益 通频带 可以表示为一般情况下的电压放大倍数&#xff0c;除以谐振时候的电压放…

江协科技STM32学习- P24 DMA数据转运DMA+AD多通道

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

Unity Newtonsoft.Json 大对象序列化失败

Unity Newtonsoft.Json 大对象序列化失败 &#x1f4a3;崩溃了没&#xff1f;&#x1f600;替代方案 &#x1f4a3;崩溃了没&#xff1f; Newtonsoft.Json.JsonTextWriter:WriteValueInternal(string,Newtonsoft.Json.JsonToken) InvalidCastException: Specified cast is not…

Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE

Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE IDE for iOS/iPadOS/macOS/watchOS/tvOS/visonOS 发布日期&#xff1a;2024 年 10 月 28 日 Xcode 16.1 包含适用于 iOS 18.1、iPadOS 18.1、Apple tvOS 18.1、watchOS 11.1、macOS Sequoia 15.1 和 visionOS 2.1 的 SDK。Xco…

噩梦开始 -- 力扣83

噩梦开始了 描述&#xff1a; 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例&#xff1a; 何解&#xff1f; 1、暴力枚举&#xff1a; 遍历一遍&#xff0c;用双指针遍历&#xff0c;一个数序…

分布式搜索引擎elasticsearch操作文档操作介绍

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;…