用moment获取一年内指定周的起始时间和结束时间、用户所选时间和前端传参时间不一致问题

本文主要是介绍用moment获取一年内指定周的起始时间和结束时间、用户所选时间和前端传参时间不一致问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题1:

原代码:

//所选周selectedWeek:{handler(){let selectedWeek = parseInt(this.selectedWeek.substring(1))//计算所选周的周开始时间和周结束时间let selectedWeekFirstDay = moment().year(this.year).week(selectedWeek).day(1).format('YYYY-MM-DD')let selectedWeekLastDay = moment().year(this.year).week(selectedWeek).day(7).format('YYYY-MM-DD')this.selectedWeekDay = [ selectedWeekFirstDay, selectedWeekLastDay ]//清空原来展示的表格数据this.tableData = []//请求一次后台展示表格数据接口// this.showOutTableData()},immediate:false},//所选年year:{handler(){// this.year = newVallet selectedWeek = parseInt(this.selectedWeek.substring(1))//计算所选周的周开始时间和周结束时间let selectedWeekFirstDay = moment().year(this.year).week(selectedWeek).day(1).format('YYYY-MM-DD')let selectedWeekLastDay = moment().year(this.year).week(selectedWeek).day(7).format('YYYY-MM-DD')this.selectedWeekDay = [ selectedWeekFirstDay, selectedWeekLastDay ]//请求一次后台展示表格数据接口// this.showOutTableData()        },immediate:false},

结果每次修改下拉框的周值,打印出年份 周份相相应的周起始时间和周结束时间:

可以看到bug:用户选择的年份和周 打印结果都正确,但是周的起始时间和结束时间并不和它们对应。(博主当前测试时间为2020.12.28)

于是查看moment.js官方文档:

year():获取或设置年份weekYear():根据语言环境获取或设置周年isoWeekYear():获取或设置ISO周年

于是将year()改为weekyear():

结果打印为

周时间段终于对上了!!!!!!

问题2:

错误原因在于没有详细查看moment.js官方文档,这里需要查看显示模块的内容。

over,时间显示正确!

 

这篇关于用moment获取一年内指定周的起始时间和结束时间、用户所选时间和前端传参时间不一致问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/596901

相关文章

Springboot3统一返回类设计全过程(从问题到实现)

《Springboot3统一返回类设计全过程(从问题到实现)》文章介绍了如何在SpringBoot3中设计一个统一返回类,以实现前后端接口返回格式的一致性,该类包含状态码、描述信息、业务数据和时间戳,... 目录Spring Boot 3 统一返回类设计:从问题到实现一、核心需求:统一返回类要解决什么问题?

springboot的controller中如何获取applicatim.yml的配置值

《springboot的controller中如何获取applicatim.yml的配置值》本文介绍了在SpringBoot的Controller中获取application.yml配置值的四种方式,... 目录1. 使用@Value注解(最常用)application.yml 配置Controller 中

maven异常Invalid bound statement(not found)的问题解决

《maven异常Invalidboundstatement(notfound)的问题解决》本文详细介绍了Maven项目中常见的Invalidboundstatement异常及其解决方案,文中通过... 目录Maven异常:Invalid bound statement (not found) 详解问题描述可

idea粘贴空格时显示NBSP的问题及解决方案

《idea粘贴空格时显示NBSP的问题及解决方案》在IDEA中粘贴代码时出现大量空格占位符NBSP,可以通过取消勾选AdvancedSettings中的相应选项来解决... 目录1、背景介绍2、解决办法3、处理完成总结1、背景介绍python在idehttp://www.chinasem.cna粘贴代码,出

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)

《SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)》本文总结了SpringBoot项目整合Kafka启动失败的常见错误,包括Kafka服务器连接问题、序列化配置错误、依赖配置问题、... 目录一、Kafka服务器连接问题1. Kafka服务器无法连接2. 开发环境与生产环境网络不通二、序

SpringSecurity中的跨域问题处理方案

《SpringSecurity中的跨域问题处理方案》本文介绍了跨域资源共享(CORS)技术在JavaEE开发中的应用,详细讲解了CORS的工作原理,包括简单请求和非简单请求的处理方式,本文结合实例代码... 目录1.什么是CORS2.简单请求3.非简单请求4.Spring跨域解决方案4.1.@CrossOr

nacos服务无法注册到nacos服务中心问题及解决

《nacos服务无法注册到nacos服务中心问题及解决》本文详细描述了在Linux服务器上使用Tomcat启动Java程序时,服务无法注册到Nacos的排查过程,通过一系列排查步骤,发现问题出在Tom... 目录简介依赖异常情况排查断点调试原因解决NacosRegisterOnWar结果总结简介1、程序在

java创建xls文件放到指定文件夹中实现方式

《java创建xls文件放到指定文件夹中实现方式》本文介绍了如何在Java中使用ApachePOI库创建和操作Excel文件,重点是如何创建一个XLS文件并将其放置到指定文件夹中... 目录Java创建XLS文件并放到指定文件夹中步骤一:引入依赖步骤二:创建XLS文件总结Java创建XLS文件并放到指定文件