解决iView中时间控件选择的时间总是少一天的问题

今天在用iview做前端页面开发的时候，遇到一个奇葩问题(也许自己主要做后台开发，当时我还纳闷了)，我在时间控件中明明选择的是2017-10-19,但是当通过vue的调试器查看的时候，竟然是这样的，如下图：

当时我还纳闷了，这iview的时间控件真神奇，我还百度谷歌了好半天，后来查看官方文档，是我获取时间的方式不是很对，我当时用的是l来v-mode绑定的，这样绑定后获取的时间好像叫utc时间，如果要想获取正确的时间，通过@on-change事件来绑定即可，(注意，用@on-change来获取时间的时候，就不能加v-model了，不然获取的时间还是老样子，这里需要注意下，我就入过坑了),如下代码：

<div class="height-400px" v-show="threeStep">
 <div class="layout-content-main" style="margin-left: 50px; margin-top: 30px;">
 <FormItem label="时间范围">
   <span>
    <DatePicker type="date" @on-change="getStartTime" placeholder="选择日期" style="width: 200px"></DatePicker>
    <span>至</span>
    <DatePicker type="date" @on-change="getEndTime" placeholder="选择日期" style="width: 200px"></DatePicker>
   </span>
 </FormItem>
 </div>

至于@on-change时间获取时间代码，我也贴出来了，如下：

 getStartTime: function (starTime) {
 console.log(startTime)
},

之后再通过Vue的时间旅行看看，我选择的是当前时间，由于我使用的没有带时间，所以选择后就只有年月日了，这个可以根据项目要求去选择哈，如下图所示：

好了，这只是我在使用vue做前端页面时候遇到的一个小小问题，分享出来，希望能帮助到遇到和我一样的人，刚刚开始接触vue，大神就别喷我了哈！

以上这篇解决iView中时间控件选择的时间总是少一天的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • iview日期控件,双向绑定日期格式的方法
赞 (0)

相关推荐

  • iview日期控件,双向绑定日期格式的方法

    日期在双向绑定之后格式为:2017-07-03T16:00:00.000Z 想要的格式为2017-07-04 调了好久,几乎一天:用一句话搞定了 @on-change="addForm.Birthday=$event" <Date-picker placeholder="选择日期" type="datetime" v-model="addForm.Birthday" :key="addForm.Birthday

  • 解决iView中时间控件选择的时间总是少一天的问题

    今天在用iview做前端页面开发的时候,遇到一个奇葩问题(也许自己主要做后台开发,当时我还纳闷了),我在时间控件中明明选择的是2017-10-19,但是当通过vue的调试器查看的时候,竟然是这样的,如下图: 当时我还纳闷了,这iview的时间控件真神奇,我还百度谷歌了好半天,后来查看官方文档,是我获取时间的方式不是很对,我当时用的是l来v-mode绑定的,这样绑定后获取的时间好像叫utc时间,如果要想获取正确的时间,通过@on-change事件来绑定即可,(注意,用@on-change来获取时间

  • layui时间控件选择时间范围的实现方法

    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择 共有两种解决方式: 方式一(layui 1.x): html代码: <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="start_time" class="layui-input" id=&

  • 解决在layer.open中使用时间控件laydate失败的问题

    今天有个需要,用户进入页面的时候,弹出一个弹窗,弹窗中选择一个时间,弹窗大概是这样的: 我的思路是,先在页面写好弹窗内容,然后使用lay.open设置content即可: <div id="layopen"> 时间:<input type="text" id="time"></input> </div> layer.open({ content: $("#layout").htm

  • Android开发中DatePicker日期与时间控件实例代码

    Android开发中DatePicker日期与时间控件实例代码

    一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activity01 package fry; import com.example.DatePicherDemo1.R; import android.app.Activity; import android.os.Bundle; import android.widget.DatePicker; import android.widget.

  • Android线程中设置控件的值提示报错的解决方法

    本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.yarin.android.Examples_04_15; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andro

  • 解决layui laydate 时间控件一闪而过的问题

    问题:一个页面多次重载时间控件,并且都是不同页面,会导致时间控件绑定了,又被覆盖其他id的时间控件,又重新绑定上去.就会导致点击日期框 ,弹框一闪而过,从其他弹窗切换回来,又有了. 解决方式: 1.把lay-key去掉 2.在每次加载对应页面的时间绑定 以上这篇解决layui laydate 时间控件一闪而过的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • VS2010中呈现控件时出错的解决方法

    在制作控件的时候容易遇到"呈现控件时出错""发生了未处理的异常.未将对象引用设置到对象的实例."这样的错误,如下图:(也有可能仅仅只是因为未设置runat="server"标签而导致该错误,请先检查该项.) 但是在编译时/运行时也都是没有错误的. 分析 如图所示的情况我们称之为"设计时"以区别于"编译时"/"运行时". 设计时:在ASP.NET环境中也就是当我们在Visual Studi

  • 灵活掌握asp.net中gridview控件的多种使用方法（上）

    灵活掌握asp.net中gridview控件的多种使用方法（上）

    灵活使用asp.net中gridview控件的方法有很多种,本文内容很富,希望大家都能有所收获. 1.GridView无代码分页排序: 效果图: 小提示: 1.AllowSorting设为True,aspx代码中是AllowSorting="True": 2.默认1页10条,如果要修改每页条数,修改PageSize即可,在aspx代码中是PageSize="12". 3.默认的是单向排序的,右击GridView弹出"属性",选择AllowSort

  • jquery UI Datepicker时间控件的使用及问题解决

    jquery UI Datepicker时间控件的使用及问题解决

    本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题. 1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题:下载地址: -->下载后的文件 jquery-ui-1.10.3.custom文件夹:不同的主题的区别在于它们引用的css不同 默认下载的样式如下: 其它样式比如我下载的样式: 下载的jqueryUI中除了css文件夹

随机推荐