解决element-ui 日期选择器提交后台数据不准确问题

最新推荐文章于 2024-03-18 15:49:29 发布
最新推荐文章于 2024-03-18 15:49:29 发布
阅读量1.4k 收藏 3
点赞数 1
文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30159639/article/details/119570780
版权

问题：

在做项目过程中，编辑需要修改日期时间，提交到后端后渲染出来的数据与设置的实际时间少1天。

解决办法：

value-format可选，绑定值的格式。不指定则绑定值为 Date 对象string

标签添加属性：value-format=“yyyy-MM-dd”

<el-date-picker
      v-model="value1"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
</el-date-picker>

喝水高手
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue+ElementUI的省市区地址选择通用组件
12-13
一、缘由 在项目开发过程中，有一个需求是省市区地址选择的功能，一开始想的是直接使用静态地址资源库本地打包，但这种方式不方便维护，于是放弃。后来又想直接让后台返回全部地址数据，然后使用级联选择器进行选择，但发现数据传输量有点大且处理过程耗时，于是又摒弃了这种方法。最后还是决定采用异步的方式进行省市区地址选择，即先查询省份列表，然后根据选择的省份code查询城市列表，最后根据选择的城市列表获取区/县列表，最终根据应用场景不同，给出了两种实现方案。 其中后台总共需要提供4个接口，一个查询所有省份的接口，一个根据省份code查询其下所有城市的接口，一个根据城市code查询其下所有区/县的接口，以及一个
Axure web后台管理 elementui.zip
11-28
Axure RP8 亲测可用，element元件库。2019年的文件。包含色彩、字体、按钮、单选框、多选框、输入框、计数器、开关、选择器、评分、表格、标签、进度条、穿梭框、分页、标记、警告、消息提示、文字提示、弹出框、导航菜单、标签页、面包屑、步骤条、折叠面板、轮播等组件。
详解element-ui日期时间选择器的日期格式化问题
10-17
主要介绍了详解element-ui日期时间选择器的日期格式化问题，本文用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，有兴趣的一起来了解一下
vue-element 时间选择器datepicker 第二次选择相同时期，页面不会刷新（解决方案）
最新发布
weixin_45379180的博客
03-18 478
vue-element 时间选择器datepicker 第二次展示change无效，数据刷新页面不刷新。解决:用blur 替代 change。
解决Element中el-date-picker组件不回填的情况
01-21
1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如： 新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填，首先要检查，后台数据返回情况以及页面上字段信息是否有差异等细节； 如果没有以上的情况，那就是我碰到的这种情况了， 后端数据返回没有差异，而且页面字段也没有错，其他的信息也正常回填，唯独时间不回填，同时也伴随一次回填后续不回填等诸多情况。总结来说就是：页面与数据
Vue element-ui 日期选择器组件 日期时间格式化\日期控件上传到后台日期少一天解决办法
林中明月间丶
05-06 1万+
https://www.cnblogs.com/lijuntao/p/7521664.html 我们要的是另一个格式 ， 如下图： 　　　　 　　怎么解决？ 　　　　可以用一个插件 moment.js 解决 　　　　1：下载，安装 　　　　　　npm install moment --save 　　　　2:引用，我这里是全局引用，并用原型链把方法挂到了vue上面，看下图： 　　　　...
vue Element UI 日期时间选择器获取格式问题
热门推荐
SnowBeatRain的博客
06-26 1万+
问题：在使用element ui&lt;el-date-picker v-model="form.leaveTime" type="datetime" placeholder="选择日期时间"&gt;&lt;/el-date-picker&gt;的时候由于是表单提交，所以使用了rule规则验证。如下：rules: { leaveTime: [ { ...
el-date-picker组件日期显示错误，只显示每月一号
just_didi的博客
06-23 3575
el-date-picker日期组件只显示每月一号
解决前端ELement UI时间控件el-date-picker提交时间误差8小时
helloyuanye的博客
08-07 877
在项目开发中使用到了DateTimePicker组件，在选择时间后点击查询发现查询导的内容与预期内容有所偏差，之后发现前端选中的时间在后端接收时相差了八个小时。需要设置value-format属性，value-format=“yyyy-MM-dd HH:mm:ss”。我们国家的标准时间是东经120°时间（东八区），而标准时间是格林威治时间（世界时），两者相差了整整8小时。前端使用框架与UI：Vue+ElementUI。
element日期时间选择器提交时间格式不准确
黑夜无风的博客
11-22 1938
<el-date-picker v-model="value2" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"> </el-date-picker> 按照文档这样提交发现开始结束时间不是按设置的来的，提交的是：betweenTime: ["2021-11-15
使用element-ui的日期选择器选择时间时少一天，以及解决dateObject.getTime is not a function
于小猿的博客
04-11 2717
在使用element-ui中的日期选择器选择时间时，选择一个时间之后，传递到后台就会少一天，比如在前端页面中选择4月1号： 但是传递到后台就是3月31号 解决方法： 只需要在 el-data-picker 标签中加上 value-format="yyyy-MM-dd" 再次运行，当选择日期之后就会报错（如果不报错就不需要下面的操作了）： 这是因为 rules 中 type:'date' 造成的，只需要去掉 rules 中的 type:'date' 即可： 再次运行： .
element-ui时间选择器（DatePicker ）数据回显
zhangxueyou2223的博客
11-20 9039
需求：element-ui时间选择器（DatePicker ）数据回显，后台返回的数据，需要前台回显展示出来。绑定值的格式保持一致就可以回显，否则是不能回显的，我这里得到的数据格式是年月日时分秒，需要展示的是月份日期（yyyy-MM-dd），所以我给timePicker绑定值的格式也设置为yyyy-MM-dd。绑定值的格式转换成你要显示的格式，让你要回显的值和【保持一致就可以回显了！
在使用element ui时DatePicker 日期选择器组件获取时间格式问题
brevey的博客
05-20 5131
<el-date-picker v-model="endTime" type="date" @change="getTime" :placeholder="结束时间" style="width:30%;margin-right:5%" ></el...
[element-ui] el-date-picker组件日期显示错误，只显示每月一号
qq_14993591的博客
08-18 4173
使用element-ui DatePicker 日期选择器，选中日期是2021-08-02至2021-08-03，浏览器中日期的值是。2021-08-01T16:00:00.000Z和2021-08-02T16:00:00.000Z；所以确定是由于时区导致的日期不一致，解决办法就是在日期控件中加入。value-format=“yyyy-MM-dd”，问题解决。...
el-date-picker常见问题
EvaY_Yang的博客
08-15 2681
el-date-picker常见问题：1.设置时间格式问题；2.当前日期之前的日期不能选择；3.点击“此刻”按钮，不关闭选择框；4.获取当前时间
element ui 日期选择控件少一天的问题解决方法
sinat_41200024的博客
11-25 9616
日期控件选择后提交到后端少一天？ 前几天一个同事问我，为何我使用element ui 的日期控件出现了一个奇葩的问题，当我选择一个日期后，页面显示是我选择的日期，但我提交到后端之后就自动的减少了一天？说真在这之前我还真没遇到过类似的情况，于是乎上网一查，还真有。看了网上好多人说不要使用v-model,改用change方法即可，这种方法在我们这儿使用不行。 因为我们使用的是form表单，尝试了网上说...
element选择时间报错（赋予了一个时间值之后）
lff18277233091的博客
02-20 516
是由于返回的数据和组件定义的时间格式不对，改成一致即可，时间返回格式要和value-format=“yyyy/MM” 对的上，这样子就不会报错了。最近在vue项目中，element-ui中的时间选择器，选定时间后，对时间进行转换时遇到了问题
el-date-picker时间选择器修改时间无效
找师父的小白的博客
12-15 9195
el-date-picker时间选择器修改时间无效 前言 最近项目当中需要编辑时间的需求，同事小姐姐在修改的时候发现值已经改变，但是页面并没有更新，问了我，我也是第一次遇见这个问题 <el-date-picker v-model="value1" type="monthrange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> 经过我一番百
el-date-picker 的一些小坑(chang事件不生效以及页面数据不更新)
weixin_40565812的博客
08-08 5097
el-date-picker注意点: 1.chang方法无效使用input方法 2.更改时间页面不渲染使用$set
Vue+Element-ui+DateTimePicker 日期时间选择器传值给后台
06-07
要将Vue+Element-ui+DateTimePicker选择的日期时间传值给后台，可以通过以下步骤实现： 1. 在Vue组件中引入Element-ui的DateTimePicker组件，并在data中定义一个变量存储选择的日期时间： ```javascript <template> <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间"> </el-date-picker> </template> <script> export default { data() { return { datetime: '' // 存储选择的日期时间 } } } </script> ``` 2. 在提交表单时，将选择的日期时间作为请求参数发送给后台： ```javascript <script> export default { methods: { submitForm() { // 将选择的日期时间作为请求参数发送给后台 axios.post('/api/save', { datetime: this.datetime }).then(response => { console.log(response); }).catch(error => { console.log(error); }); } } } </script> ``` 3. 在后台接收到请求时，可以通过请求参数获取选择的日期时间并进行处理： ```python from flask import Flask, request app = Flask(__name__) @app.route('/api/save', methods=['POST']) def save(): datetime = request.json.get('datetime') # 进行日期时间处理 # ... if __name__ == '__main__': app.run() ``` 这样就可以将Vue+Element-ui+DateTimePicker选择的日期时间传值给后台了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值