热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

uniapp实现横向滚动选择日期

这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码,供大家参考,具体内容如下

1.方法封装 common.js

//获取当前时间,格式YYYY-MM-DD HH:MM:SS
const GetNowTime = time => {
 var date = time,
 year = date.getFullYear(),
 mOnth= date.getMonth() + 1,
 day = date.getDate(),
 hour = date.getHours() <10 &#63; "0" + date.getHours() : date.getHours(),
 minute = date.getMinutes() <10 &#63; "0" + date.getMinutes() : date.getMinutes(),
 secOnd= date.getSeconds() <10 &#63; "0" + date.getSeconds() : date.getSeconds();
 month >= 1 && month <= 9 &#63; (mOnth= "0" + month) : "";
 day >= 0 && day <= 9 &#63; (day = "0" + day) : "";
 // var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
 var timer = year + '-' + month + '-' + day;
 return timer;
}

// 格式化电话号码
const GetPhOne= phOne=> {
 let tel = phone.slice(0, 3) + '****' + phone.slice(7, 11);
 return tel;
}
//返回日期和周几数组
function weekDate() {
 var myDate = new Date();
 myDate.toLocaleDateString();
 var mOnth= myDate.getMonth() + 1;
 var time = myDate.getFullYear() + '年' + month + '月' + myDate.getDate() + '日';
 var total = 1; // 个数
 var dayList = [];
 dayList.push({
 'day': myDate.getDate(),
 'month': myDate.getMonth() + total,
 'week': toWeekDay(myDate.getDay()),
 'year': myDate.getFullYear()
 });
 for (var i = 0; i <10; i++) {
 myDate.setDate(myDate.getDate() + total); // number 是最近几天 则会自动计算
 // 需求 月份-日 星期几  
 dayList.push({
 'day': myDate.getDate(),
 'month': myDate.getMonth() + total,
 'week': toWeekDay(myDate.getDay()),
 'year': myDate.getFullYear()
 })
 }
 // return dayList;
 let length = dayList.length
 let arrOne= dayList[0]
 let arrLast = dayList[length - 1]
 let StartDate = arrOne.year.toString() + '-' + arrOne.month + '-' + arrOne.day
 let EndDate = arrLast.year.toString() + '-' + arrLast.month + '-' + arrLast.day
 return {
 dayList,
 StartDate,
 EndDate
 }
}

function toWeekDay(weekDay) { // 传入数据 讲一周的某一天返回成中文状态下的字符
 switch (weekDay) {
 case 1:
 return '一';
 break;
 case 2:
 return '二';
 break;
 case 3:
 return '三';
 break;
 case 4:
 return '四';
 break;
 case 5:
 return '五';
 break;
 case 6:
 return '六';
 break;
 case 0:
 return '日';
 break;
 default:
 break;
 }
 return '传入未知参数';
}
module.exports = {
 GetNowTime,
 GetPhone,
 weekDate
}

2.组件.vue





效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • FreeBSD环境下PHP GD库安装问题的详细解决方案
    在 FreeBSD 环境下,安装 PHP GD 库时可能会遇到一些常见的问题。本文详细介绍了从配置到编译的完整步骤,包括解决依赖关系、配置选项以及常见错误的处理方法。通过这些详细的指导,开发者可以顺利地在 FreeBSD 上完成 PHP GD 库的安装,确保其正常运行。此外,本文还提供了一些优化建议,帮助提高安装过程的效率和稳定性。 ... [详细]
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
  • 提升 Kubernetes 集群管理效率的七大专业工具
    Kubernetes 在云原生环境中的应用日益广泛,然而集群管理的复杂性也随之增加。为了提高管理效率,本文推荐了七款专业工具,这些工具不仅能够简化日常操作,还能提升系统的稳定性和安全性。从自动化部署到监控和故障排查,这些工具覆盖了集群管理的各个方面,帮助管理员更好地应对挑战。 ... [详细]
  • 本文介绍了如何在 Windows 系统上利用 Docker 构建一个包含 NGINX、PHP、MySQL、Redis 和 Elasticsearch 的集成开发环境。通过详细的步骤说明,帮助开发者快速搭建和配置这一复杂的技术栈,提升开发效率和环境一致性。 ... [详细]
  • 在使用SSH框架进行项目开发时,经常会遇到一些常见的问题。例如,在Spring配置文件中配置AOP事务声明后,进行单元测试时可能会出现“No Hibernate Session bound to thread”的错误。本文将详细探讨这一问题的原因,并提供有效的解决方案,帮助开发者顺利解决此类问题。 ... [详细]
  • Linux Shell变量初探:初始值解析与使用指南
    本文探讨了Linux Shell中变量的基本概念及其在BASH中的应用。变量是用于存储可变数据的标识符,能够代表不同的值。文章详细介绍了BASH shell的主要优势,包括强大的命令编辑能力、自动补全功能、命令别名设置、作业控制以及前后台任务管理。此外,还涵盖了编程脚本编写和通配符的使用方法,为初学者提供了全面的指导。 ... [详细]
  • 求助:在CentOS 5.8系统上安装PECL扩展遇到问题
    在 CentOS 5.8 系统上尝试安装 APC 扩展时遇到了问题,具体表现为 PECL 工具无法正常工作。为了确保顺利安装,需要解决 PECL 的相关依赖和配置问题。建议检查 PHP 和 PECL 的版本兼容性,并确保所有必要的库和开发工具已正确安装。此外,可以尝试手动下载 APC 扩展的源代码并进行编译安装,以绕过 PECL 工具的限制。 ... [详细]
  • IDEA 2019.2 中 SFTP 部署功能无法成功连接至服务器的问题分析与解决 ... [详细]
  • TCP三次握手过程详解与图示解析
    本文详细解析了TCP三次握手的过程,并通过图示清晰展示了各个状态的变化。同时,文章还介绍了四次挥手的图解,解释了在TIME_WAIT状态中,客户端最后一次发送的ACK包的作用和重要性。 ... [详细]
  • 本文探讨了在形状类族中应用纯虚函数的设计模式及其解析方法。通过定义一个基类 `Shape`,其中包含一个纯虚函数 `area()`,实现了多态性和代码的灵活性。该设计使得派生类能够根据具体的形状计算面积,从而提高了代码的可扩展性和复用性。示例代码展示了如何利用纯虚函数实现这一机制。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 基址获取与驱动开发:内核中提取ntoskrnl模块的基地址方法解析
    基址获取与驱动开发:内核中提取ntoskrnl模块的基地址方法解析 ... [详细]
  • 2016-2017学年《网络安全实战》第三次作业
    2016-2017学年《网络安全实战》第三次作业总结了教材中关于网络信息收集技术的内容。本章主要探讨了网络踩点、网络扫描和网络查点三个关键步骤。其中,网络踩点旨在通过公开渠道收集目标信息,为后续的安全测试奠定基础,而不涉及实际的入侵行为。 ... [详细]
  • 1. 设置用户密码:使用 `slappasswd` 工具生成加密密码,确保账户安全。具体步骤如下:输入命令 `slappasswd -s NewPassword`,系统将提示重新输入新密码,并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件:编辑 `vildapus` 配置文件,添加必要的用户账户信息,以确保新用户能够顺利登录系统。 ... [详细]
author-avatar
手机用户2602927805
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有