zoukankan      html  css  js  c++  java
  • vue 时间控件

    vue 时间控件https://www.cnblogs.com/zhoushuang0426/p/10606863.html

    Vue el-date-picker 日期组件的使用

     

    一:显示年月

    <el-date-picker v-model="selectMonth" type="month" placeholder="选择月"   @change="jobSearch" value-format="yyyy-MM"></el-date-picker>

    js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <script>
    export default {
        data() {
             return {
                selectMonth:''
            }
        },
        created() {
            this.initData({});
        },
        methods: {
            jobSearch() {
          this.getJobListByMonth();
        },
        async initData(data) {
          //获取当前时间
          var now   = new Date();
          var monthn = now.getMonth()+1;
          var yearn  = now.getFullYear();
          this.selectMonth = yearn+"-"+monthn;
     
          this.selectUser = parseInt(sessionStorage.getItem("userid"));
          // this.getWeekJobList({
          //   userid: sessionStorage.getItem("userid"),
          //   weekid: "1"
          // });
          this.getJobListByMonth();
        },
        async getJobListByMonth(data) {
     
        }
       }
    }
    </script>

    二:选择年月日

    <el-date-picker v-model="selectDay" type="date" placeholder="选择日" @change="dataSearch" value-format="yyyy-MM-dd"></el-date-picker>

    js代码:

    复制代码
    <script>
    export default {
        data() {
             return {
                selectDay:''
            }
        },
        created() {
            this.initData({});
        },
        methods: {
            dataSearch() {
          this.getListByDay();
        },
        async initData(data) {
          //获取当前时间
          var now   = new Date();
          var monthn = now.getMonth()+1;
          var yearn  = now.getFullYear();
          var dayn = now.getDate();
          this.selectDay = yearn+"-"+monthn+"-"+dayn;
    
          this.selectUser = parseInt(sessionStorage.getItem("userid"));
          this.getListByDay();
        },
        async getListByDay(data) {
    
        }
       }
    }
    </script>
    复制代码

    三:显示年月日时分(秒)

    <el-date-picker v-model="selectDatetime" type="datetime" placeholder="选择时间" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>

    js代码:

    复制代码
    <script>
    export default {
        data() {
             return {
                selectDatetime:''
            }
        },
        created() {
            this.initData({});
        },
        methods: {
            dataSearch() {
          this.getListByDataTime();
        },
        async initData(data) {
          //获取当前时间
          var now   = new Date();
          var monthn = now.getMonth()+1;
          var yearn  = now.getFullYear();
          var dayn = now.getDate();
          var h = now.getHours();
          var m =now.getMinutes();
          var s = now.getSeconds();
          this.selectDatetime = yearn+"-"+monthn+"-"+dayn+" "+h+":"+m+":"+s;
    
          this.selectUser = parseInt(sessionStorage.getItem("userid"));
          this.getListByDataTime();
        },
        async getListByDataTime(data) {
    
        }
       }
    }
    </script>
    复制代码
  • 相关阅读:
    springcloud(九):熔断器Hystrix和Feign的应用案例
    springcloud(八):熔断器Hystrix
    springcloud(七): 使用Feign调用Eureka Server客户端服务
    springcloud(六):给Eureka Server服务器端添加用户认证
    springcloud(六):Eureka提供数据的客户端连接Docker的mysql
    Live Reload
    localStorage eval script
    javascript AOP
    如何设置让SFTP的用户限制在某个目录下
    整站下载器
  • 原文地址:https://www.cnblogs.com/dayspring/p/13258824.html
Copyright © 2011-2022 走看看