el-date-picker 限制选择的时间，并做置灰处理

Posted 2023-04-16

参考技术A picker-options 设置日期选择范围

disabledDate：不可选择的时间的置灰处理

getTime(): js方法，返回距 1970 年 1 月 1 日之间的毫秒数

ElementUI控件el-date-picker 时间段误差8小时问题的处理

DatePicker 日期选择器时间端参数误差问题处理

前言

    一个前后端分离项目, 前端项目Vue + ElementUI 搭建, 后端项目SpringBoot + JFinal 搭建.
    前后端开发完成后, 使用el-date-picker 组件按时间段查询数据, 发现查出的数据时间上总有些误差, 数据库中正常状态的数据,没有全部查出来, 打断点才发现, 传输的时间参数和前端控件所选时间端不匹配, 不是后端接口问题.

问题演示

截图如下

问题原因

    国际时间和北京时间???
    中国国家标准时间是东经120°（东八区）的地方时间,同格林威治时间（世界时）整整相差8小时

问题解决

    设置value-format 属性, 精确到时间段value-format=“yyyy-MM-dd HH:mm:ss” 即可.
    查看ElementUI 控件DatePicker日期选择器(日期格式, 控件属性)

                <el-form-item label="时间：" class="el-inline-block">
                    <el-date-picker v-model="model.date"
                              type="datetimerange"
                              range-separator="至"
                              clearable = false
                              value-format="yyyy-MM-dd HH:mm:ss"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

    处理后传参如图

Power By niaonao, The End, Thanks