zoukankan      html  css  js  c++  java
  • Vue el-date-picker 日期组件的使用

    一:显示年月

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

    js代码:

    <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>
  • 相关阅读:
    牛牛与LCM(最小公约数)
    小明的挖矿之旅_牛客网(思维题)
    2019/4/20周赛 F题 CodeForces
    哥德巴赫猜想_2019/7/11_牛客网
    智障操作-wireless AC 9462
    codeforces762A
    2019中山大学程序设计竞赛(重现赛)斐波那契/
    Java自学笔记(10):【面向对象 】 类和对象、构造方法、this关键字
    Java自学笔记(9):方法
    Java自学笔记(8):多维数组
  • 原文地址:https://www.cnblogs.com/zhoushuang0426/p/10606863.html
Copyright © 2011-2022 走看看