使用饿了么el-date-picker里及如何将后台给的时间戳js转化为时间格式

首先代码是这个样子的,使用v-model

<el-date-picker v-model="formData.createTime"
            :disabled="true"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
</el-date-picker>

当formData.createTime接收后台的值是时间戳时,页面F12报:TypeError: dateStr.search is not a function

为什么呢,查看官网文档:使用format指定输入框的格式;使用value-format指定绑定值的格式。

这里绑定值并不是时间戳 :value-format="yyyy-MM-dd HH:mm:ss"
当我改为:value-format="timestamp"就可以了

当然如果你不想改,就用更麻烦的方法把绑定值时间戳转化为对应的时间格式

方法如下:

function myFormatDate(dd) {
  var now=new Date(dd);
  var year=now.getFullYear();
  var month=now.getMonth()+1;
  var date=now.getDate();
  var hour=now.getHours();
  var minute=now.getMinutes();
  var second=now.getSeconds();
  return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}

处理一下this.formData.createTime = myFormatDate(this.formData.createTime)

当然这样很麻烦,而且代码也繁琐,这就是我开始没具体看文档写的方法,所以细心阅读文档还是很重要的

原文地址:https://www.cnblogs.com/bobo1/p/10916474.html

时间: 2024-08-29 16:02:24

使用饿了么el-date-picker里及如何将后台给的时间戳js转化为时间格式的相关文章

js处理数据库时间格式/Date(1332919782070)/

js处理数据库时间格式 数据库返回时间格式:/Date(1332919782070)/ 方法: function ChangeDateFormat(val) { if (val != null) { var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10)); //月份为0-11,所以+1,月份小于10时补个0 var month

Date.prototype.format,js下的时间格式处理函数

该方法在date的原型中扩展了format方法,使其可以方便的格式化日期格式输出. Date.prototype.format =function(format) { var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), /

Date Picker控件:

Date Picker控件: 中文:日期/时间选取器 UIDatePicker有一个实例方法setDate:animated,以编程的方式选择日期. UIDatePicker有四种模式(model): Time(只选时间) Date(只选日期) Date and Time(选择时间和日期) Count Down timer (倒数计时器 ) 日期选取器不允许指定秒或时区 属性: locale:选择地区 custom:自定义时间 设置最小时间和最大时间,超过就会自动回到最小时间 // 添加一个时间

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选

Date Picker和UITool Bar控件简单介绍

Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选择器出来,示例代码

Freebie: Date Picker Calendar Demo Form For Oracle Forms 6i

I have already posted and provided the required PLSQL Library and the Calendar FMX file in my previous blog post Date Picker Calendar For Oracle Forms but some people were still not able to use this utility in their forms, so I thought to provide a d

Date Picker Calendar For Oracle Forms 6i

Giving date picker calendar option to user for date type fields in Oracle Forms. I am providing you the form (FoxCal.Fmx) and two libraries (General.plx and Calendar.pll). You can download these files by clicking below link: Download Form and require

asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css文件,例如: <script language="javascript" type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script> <l

时间格式变更之EL表达式

昨日写一个班次设定,保存后台数据库的所有时间都是整数,小数,前台页面时需要变换成正常时间格式,比如22:30在后台数据库存22.5  22:00后台是22,后台取了一串List,以Page的形式放置,然后分别set了一下格式,加到了model里,到前台展示后,页面总是报错,原因是set后数据库的值变更了,我百思不得其解 头疼了很久 困扰了1天 一直在想后台怎么解决.贴出错误代码: 后台: @RequestMapping(value = {"list", ""}) p