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

    <template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value6"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value7"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions2: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value6: '',
            value7: ''
          };
        },
     watch: {
       value6(newVal, oldVal) {
         console.log(newVal,oldVal)
       }
      }
      };
    </script>
  • 相关阅读:
    第三周作业
    第二周作业
    第一周作业
    第三次作业
    第二次作业
    c语言最后一次作业
    第14、15教学周作业
    第七周作业
    第六周随笔
    第四周作业
  • 原文地址:https://www.cnblogs.com/1rookie/p/8658594.html
Copyright © 2011-2022 走看看