使用element-ui实现时间格式化

最新推荐文章于 2025-05-12 18:00:25 发布

始终坚持在保安岗位

最新推荐文章于 2025-05-12 18:00:25 发布

阅读量1.7k

点赞数 20

CC 4.0 BY-SA版权

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/weixin_51391923/article/details/135717304

本文介绍了如何在Vue项目中使用ElementUI的el-date-picker组件设置开始和结束日期，并将当前时间作为默认值。展示了`ruleForm`对象的配置以及`getNowTime`方法的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接上代码，欢迎各位大佬指点。

     <el-form-item label="开始日期" prop="startTime" v-if="showDateFields">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="datetime"
              placeholder="开始日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handleDateChange"
              :picker-options="startPickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期" prop="endTime" v-if="showDateFields">
            <el-date-picker
              v-model="ruleForm.endTime"
              type="datetime"
              placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handleDateChange"
              :picker-options="endPickerOptions"
            >
            </el-date-picker>
          </el-form-item>

  export default {
    data() {
    return {
   // 表单数据
      ruleForm: {
        startTime: this.getNowTime(),
        endTime:  this.getNowTime(),
      },
    }
  }
methods:{
   getNowTime() {
      var d = new Date();
      var year = d.getFullYear(); //得到年
      var month =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1; //得到月
      var day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate(); //得到日
      var hour = d.getHours() < 10 ? "0" + d.getHours() : d.getHours(); //得到时
      var minute = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes(); //得到分
      var second = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds(); //得到秒
      return (
        [year, month, day].join("-") + " " + [hour, minute, second].join(":")
      ); //格式为：YY-MM-DD hh:mm:ss（当前时间）
    },
}
  },