Tue Aug 11 2020 11:34:00 GMT+0800 (中国标准时间)进行显示格式化

news/2024/7/10 23:28:41 标签: vue.js, html, javascript, es6, css3

把标准时间用new Date声明一下,然后用原生拼接就可以了。
代码如下:

 const value = new Date();
 getYear = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes() + ':' + value.getSeconds(); 

今天做的一个功能虽然简单,但是对于我这个小白来说,搞了半天,需求是默认显示的是在这里插入图片描述
第一次显示的是双向绑定的值,很显然不对,后来显示出来的是Tue Aug 11 2020 15:47:00 GMT+0800 (中国标准时间),很显然也不对,然后我时间格式化以后,需要在刚加载页面的时候就获取,当我在生命周期里面写上方法以后,只能显示一个报错:
Cannot read property ‘$el’ of undefined
应该是因为在刚加载的时候,因为我给他默认先隐藏的,所以就获取不到这个元素,后来脑子灵光了一下,我可以先动态渲染value的值,然后点击事件在获取 ‘el’ 的值就可以了。代码如下

html"><div>
 <input class="current" type="text" :value='timeMonth' @click = 'clickDateMonth'>
 <van-datetime-picker
    ref='vanDatetimeMonth'
    class="vanPicker"
    v-model="currentDateYear"
    type="datetime"
    title="选择完整时间"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="confirmData"
    @cancel='cancelData'
    >
 </van-datetime-picker>
</div>
// 生命周期
created () {
   this.suceuend();
},
methods: { 
// 在生命周期刚渲染的时候就让时间格式化,渲染到value的值上,
 suceuend () {
    let slowDate = new Date();
    if (slowDate.getMinutes() <= 9) {
       youWant = slowDate.getFullYear() + '-' + (slowDate.getMonth() + 1) + '-' + slowDate.getDate() + ' ' + slowDate.getHours() + ':' + '0' + slowDate.getMinutes(); 
    } else {
       youWant = slowDate.getFullYear() + '-' + (slowDate.getMonth() + 1) + '-' + slowDate.getDate() + ' ' + slowDate.getHours() + ':' + slowDate.getMinutes(); 
    }
    // 渲染value值
    this.timeYear = youWant;
    this.timeMonth = youWant;
 	},
 }
 // 点击的时候,这个是vant组件自带的事件,点击的时候,默认形参value值,就是当前时间,我在这把时间拼接了一下
confirm (value) {
  console.log(value);
  // 只是格式化时间的,如果想要以前的年份的话就这传参这儿减value.getFullYear() - 1
  if (value.getMinutes() <= 9) {
     youWant = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + '0' + value.getMinutes(); 
  } else {
     youWant = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes(); 
  };
  this.timeYear = youWant;
  // 点击的时候获取就不报错了
  this.$refs.vanDatetime.$el.style = 'display: none'
},

http://www.niftyadmin.cn/n/763909.html

相关文章

找不到列 dbo 或用户定义的函数或聚合_CD消费用户行为分析——python

一、项目背景及目的CDNow曾经是一家在线音乐零售平台&#xff0c;后被德国波泰尔斯曼娱乐集团公司出资收购&#xff0c;其资产总价值在最辉煌时曾超过10亿美元。本文主要通过分析CDNow网站的用户购买明细来分析该网站的用户消费行为&#xff0c;使运营部门在营销时更加具有针对…

原生html、js开发使用localStorage进行俩个页面之间传值(组件用vant)是tabs标签切换

最近在开发一个移动端的app&#xff0c;有一个需求就是点击按钮的时候让vant组件里面的tabs&#xff08;默认显示的是第一个&#xff09;标签显示到第三个上边&#xff0c;这就用到了localStorage。因为是用的cdn引入的vue&#xff0c;所以用的是vue。已下是代码 // A页面 dis…

python csv 排序_tidyfst vs pandas(6):排序

作者&#xff1a;黄天元&#xff0c;复旦大学博士在读&#xff0c;热爱数据科学与开源工具&#xff08;R&#xff09;&#xff0c;致力于利用数据科学迅速积累行业经验优势和科学知识发现&#xff0c;涉猎内容包括但不限于信息计量、机器学习、数据可视化、应用统计建模、知识图…

vant组件上传文件的使用

因为:after-read"beforeRead"写错了&#xff0c;应该是after-read&#xff0c;文件读取完成后的回调函数&#xff0c;但是我刚开始写成了before-read&#xff0c;这是&#xff08;文件读取前的回调函数&#xff0c;返回 false 可终止文件读取&#xff0c;支持返Promi…

openstack rocky 安装_通过DevStack最小化部署OpenStack

干货分享OpenStack云计算平台&#xff0c;帮助服务商和企业内部实现类似于 Amazon EC2 和 S3 的云基础架构服务(Infrastructure as a Service, IaaS)。OpenStack 包含两个主要模块&#xff1a;Nova 和 Swift&#xff0c;前者是 NASA 开发的虚拟服务器部署和业务计算模块&#x…

javaee根据数据生成信息分布图_原创 | 使用JPA实现DDD持久化-数据库连接配置:persistence.xml

第二节 数据库连接配置&#xff1a;persistence.xml为了通过JPA将领域对象的状态持久化到数据库&#xff0c;必须告知JPA数据库的类型、位置、账号访问等相关信息。根据JPA规范&#xff0c;这些信息应该定义在类路径下的META-INF/persistence.xml文件中。在maven项目中&#xf…

ajax和jq的使用

input和textarea都可以使用它的value值获取它的长度&#xff0c;也可以把value的值当做参数传。 <input typetext value onkeyupshowup(this.value)/>function showup (str) {// 执行的逻辑&#xff0c;这就可获取value的长度了var xmlhttp;if (str.length0){ document.…

window原生js跳转页面

// 这是返回上一页 window.history.go(-1); window.history.back(); // 这是跳转页面 window.location.herf 跳转的地址