前端elementUI如何自动获取当前日期和用户名

Question

前端elementUI如何自动获取当前日期和用户名？

这个申请人的输入框，我不想让它默认为空，直接获取我登录时的用户名，并且还能进行修改。

同理，这个时间选择框，我也不想让它默认为空，直接让它自动填充今天的日期（年-月-日），并且还能进行选择。

Answer 1

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7439881
• 这篇博客你也可以参考下：elementUI的时间选择器 - 选择日期范围，选择时间后获取时间的格式问题
• 除此之外, 这篇博客: elementUi日期选择组件,周数范围选择和月份范围选择的封装，复制就完了，造什么轮子中的 ,如有不足之处,欢迎指出: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <template>
    <div class="datePublic">
      <!-- 周选择 -->
      <div class="week">
        <el-date-picker
          ref="getStartWeek"
          @change="startWeekChange"
          v-model="startWeek"
          type="week"
          format="yyyy年-WW周"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <span>&nbsp;&nbsp;--&nbsp;&nbsp;</span>
        <el-date-picker
          ref="getEndWeek"
          @change="endWeekChange"
          v-model="endWeek"
          type="week"
          format="yyyy年-WW周"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <!-- 月选择 -->
      <div class="month">
        <el-date-picker
          @change="monthChange"
          v-model="month"
          value-format="yyyy-MM"
          type="monthrange"
          range-separator="至"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        startWeek: "",
        endWeek: "",
        month: [],
        //禁用日期范围
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      };
    },
  
    methods: {
      startWeekChange() {
        console.log("开始年"+this.$refs.getStartWeek.displayValue.slice(0, 4));
        console.log("开始周"+this.$refs.getStartWeek.displayValue.slice(6, 8));
      },
      endWeekChange() {
        console.log("结束年"+this.$refs.getEndWeek.displayValue.slice(0, 4));
        console.log("结束周"+this.$refs.getEndWeek.displayValue.slice(6, 8));
      },
      monthChange() {
        console.log("月份范围"+this.month);
      }
    },
  
    created() {
     var date = new Date();
      //elementUI不支持周的直接获取与赋值，需要处理默认值：
      var startTime = new Date(date.getTime() - 7 * 24 * 3600 * 1000 * 8); //时间戳
      this.startWeek = startTime.toLocaleDateString();
      this.endWeek = date;
      //月处理 用来设置默认值 (假如当前月为3月,那么选6个月前不能直接减6,需要处理)
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
  
      var startMonth;
      var endMonth = year + "-" + month;
      var before = 6  //几个月之前
      if (month - before < 0) {
        startMonth = year - 1 + "-" + (12+month-before); 
      } else {
        startMonth = year + "-" + (month-before);
      }
      this.month = [startMonth, endMonth];
    },
    mounted() {
      console.log(this.$refs.getStartWeek.displayValue);
      console.log(this.$refs.getEndWeek.displayValue);
      console.log("月份范围"+this.month);
    }
  };
  </script>
  
  <style lang='less' scoped>
  
  </style>

• 以下回答由chatgpt基于相关博客总结生成:

  针对该问题，可以采取以下步骤实现自动获取当前日期和用户名的功能：

  1. 获取当前用户名： 可以通过在登录页面记录下用户信息，在其他页面通过全局变量或者vuex等方式调用获取当前登录的用户信息。

  2. 自动填充当前日期： 可以通过Date对象获取当前日期，然后使用elementUI中的日期选择组件，在组件中设置value值为当前日期，即可自动填充当前日期。代码示例如下：

  <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
  
  data() {
    return {
      date: new Date()
    };
  },
  methods: {
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now() - 8.64e6;
      }
    }
  }
  

  1. 实现日期选择功能： 同样是通过日期选择组件实现，可以将value绑定到一个变量上，然后通过监听变量值的变化来获取选择的日期，示例代码如下：

  <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="handler"></el-date-picker>
  
  data() {
    return {
      date: new Date()
    };
  },
  methods: {
    handler(date) {
      console.log(date);
    },
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now() - 8.64e6;
      }
    }
  }
  

  以上是实现自动获取当前日期和用户名以及日期选择功能的一些示例代码，具体实现还需要根据具体的业务场景进行相应的调整和优化。