前端各种日期的处理（vue）

前进！蓝色空间

已于 2023-06-26 10:09:08 修改

阅读量316

点赞数

分类专栏：前端相关文章标签：前端 vue.js javascript vscode html

于 2023-06-12 10:29:15 首次发布

本文链接：https://blog.csdn.net/qq_37958178/article/details/131163511

版权

前端相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该代码片段展示了在Vue.js应用中如何配置日期时间选择器，包括设置快捷选项（如最近一周、最近一个月、最近三个月）以及时间格式化函数。同时，它也包含了开始和结束日期的选择，并检查了开始日期是否小于结束日期。此外，还涉及了禁用未来日期的功能。

摘要由CSDN通过智能技术生成

       1.
        //日期
        pickerOptions: {
          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])
            }
          }]
        }

2.时间/日期格式

<el-table-column align="center" prop="dateDemo" label="某某时间" width="180" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>

//时间格式处理
      dateFormat: function(row, column) {
        var date = row[column.property]
        if (date == undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      },

3.开始/结束时间

<el-form-item label="开始日期">
    <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"
      :picker-options="pickerOptions" popper-class="datePic" value-format="yyyy-MM-dd">        
    </el-date-picker>
</el-form-item>
<el-form-item label="结束日期">
     <el-date-picker v-model="form.endDate" type="date"  placeholder="选择日期"
       :picker-options="pickerOptions" popper-class="datePic" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          },{
            text: '清空',
            onClick(picker) {
              picker.$emit('pick', '');
            }
          }]
        }

      var d1 = new Date(startTime.replace(/\-/g, "\/")); 
      var d2 = new Date(endTime.replace(/\-/g, "\/")); 

      if(startTime!="" && endTime!="" && d1 >=d2) 
      {
          alert("开始时间必须小于结束时间！");
          return false; 
      }