热门标签 | 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





效果图

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


推荐阅读
  • 树莓派Linux基础(一):查看文件系统的命令行操作
    本文介绍了在树莓派上通过SSH服务使用命令行查看文件系统的操作,包括cd命令用于变更目录、pwd命令用于显示当前目录位置、ls命令用于显示文件和目录列表。详细讲解了这些命令的使用方法和注意事项。 ... [详细]
  • eclipse学习(第三章:ssh中的Hibernate)——11.Hibernate的缓存(2级缓存,get和load)
    本文介绍了eclipse学习中的第三章内容,主要讲解了ssh中的Hibernate的缓存,包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ... [详细]
  • Java学习笔记之使用反射+泛型构建通用DAO
    本文介绍了使用反射和泛型构建通用DAO的方法,通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作,从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
  • 原理:dismiss再弹出,把dialog设为全局对象。if(dialog!null&&dialog.isShowing()&&!(Activity.)isFinishing()) ... [详细]
  • SpringBoot整合SpringSecurity+JWT实现单点登录
    SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]
  • LVS实现负载均衡的原理LVS负载均衡负载均衡集群是LoadBalance集群。是一种将网络上的访问流量分布于各个节点,以降低服务器压力,更好的向客户端 ... [详细]
  • 本文详细介绍了在Centos7上部署安装zabbix5.0的步骤和注意事项,包括准备工作、获取所需的yum源、关闭防火墙和SELINUX等。提供了一步一步的操作指南,帮助读者顺利完成安装过程。 ... [详细]
  • GSIOpenSSH PAM_USER 安全绕过漏洞
    漏洞名称:GSI-OpenSSHPAM_USER安全绕过漏洞CNNVD编号:CNNVD-201304-097发布时间:2013-04-09 ... [详细]
  • 本文介绍了在RHEL 7中的系统日志管理和网络管理。系统日志管理包括rsyslog和systemd-journal两种日志服务,分别介绍了它们的特点、配置文件和日志查询方式。网络管理主要介绍了使用nmcli命令查看和配置网络接口的方法,包括查看网卡信息、添加、修改和删除配置文件等操作。 ... [详细]
  • Python脚本编写创建输出数据库并添加模型和场数据的方法
    本文介绍了使用Python脚本编写创建输出数据库并添加模型数据和场数据的方法。首先导入相应模块,然后创建输出数据库并添加材料属性、截面、部件实例、分析步和帧、节点和单元等对象。接着向输出数据库中添加场数据和历程数据,本例中只添加了节点位移。最后保存数据库文件并关闭文件。文章还提供了部分代码和Abaqus操作步骤。另外,作者还建立了关于Abaqus的学习交流群,欢迎加入并提问。 ... [详细]
  •     这里使用自己编译的hadoop-2.7.0版本部署在windows上,记得几年前,部署hadoop需要借助于cygwin,还需要开启ssh服务,最近发现,原来不需要借助cy ... [详细]
  • 大坑|左上角_pycharm连接服务器同步写代码(图文详细过程)
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了pycharm连接服务器同步写代码(图文详细过程)相关的知识,希望对你有一定的参考价值。pycharm连接服务 ... [详细]
  • Hadoop2.6.0 + 云centos +伪分布式只谈部署
    3.0.3玩不好,现将2.6.0tar.gz上传到usr,chmod-Rhadoop:hadophadoop-2.6.0,rm掉3.0.32.在etcp ... [详细]
  • linux 禁止指定ip访问
    linux中如何禁止指定的ip访问呢?比如被别人暴力破解,被别人使用不同的密码尝试登录:所以我想直接禁用这些ip的访问.怎么办呢?解决方案:修改配置文件etchosts.deny把 ... [详细]
  • 一、修改注册表去掉桌面图标小箭头1按下win+R组合快捷键,打开windows10系统的“运行”窗口,输入“regedit”,打开注册表编辑器,找到HKEY_CLASSES_ROOT\lnkfi ... [详细]
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社区 版权所有