zoukankan      html  css  js  c++  java
  • vue 日期转换

    y: date.getFullYear(), 如果报错  time 要new Data(time)
    <!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <!-- vue -->
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <!-- element引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- element引入组件库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <!--Axios-->
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    
    </head>
    
    <body>
      <div id="App">
    
       <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="选择日期时间"
    @change="changeDate">
        </el-date-picker>
      </div>
    <span>{{d}}<span/> <br/>
    <span>{{d | parseTime}}<span/>
    
      </div>
    </body>
    <style scoped>
    
    </style>
    <script>
    Vue.filter("parseTime", function(time, cFormat) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                    if (arguments.length === 0) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['', '', '', '', '', '', ''][value ] }
        return value.toString().padStart(2, '0')
      })
      return time_str
                });
    
      var vm = new Vue({
        el: "#App",
        data: {
           value1: '',
      d: '2021-12-16T23:36:21'
             
        },
        created() {
    
        },
        methods: {
         parseTime(time, cFormat) {
      if (arguments.length === 0) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['', '', '', '', '', '', ''][value ] }
        return value.toString().padStart(2, '0')
      })
      return time_str
    },
    // js 日期选择
    changeDate(value) {
     console.log(value)
       var mydata = this.parseTime(value)
     console.log(mydata )
    }
          
        }
      })
    </script>
    
    
    
    
    </html>
  • 相关阅读:
    python 包管理工具 pip 的配置
    Python 变量作用域 LEGB (下)—— Enclosing function locals
    Python 变量作用域 LEGB (上)—— Local,Global,Builtin
    2020 Java 面试题 小结 (答案慢慢补上,有错误请指出)
    mysql 根据日期(date)做年,月,日分组统计查询
    jvm指令
    正则表达式 分割地址 获取省市区详细地址
    .Net 异常记录
    WCF设计服务协议(一)
    plsql ORA-01789:查询块具有不正确的结果列数
  • 原文地址:https://www.cnblogs.com/xfweb/p/15722512.html
Copyright © 2011-2022 走看看