element-ui DatePicker 日期选择器-控制选择精确到时分秒-禁止选择今天之前-或者今天之后日期### 前言

前言

• 最近在使用芋道框架时候，后端使用生成代码，时间因为类型问题，只能是时间戳，否则为空（1970-）

• 前端其实很简单只要在日期选择器把类型改成时间错即可，但根据业务需求需要精确到时分秒

• 把时间戳的类型转换过来，就会发现日期是选择的哪一天，但是时分秒是当前电脑的时分秒

• 但是根据业务需求需要控制时分秒如（1949-10-1 00:00:00 1949-10-1 23:59:59）

解决方案

使用日期选择器我们可是使用字符串类型的就可以控制时分秒写死，但是这样后端存储不了（只能存时间戳）

使用date对象在提交时候先new date 转换成标准时间，在使用Date.parse 把标准时间转换成时间戳就解决了

代码

// 此时是字符串时间-可以精确到任意时分秒
<el-date-picker
   v-model="contractform.startDate"
   type="date"
   value-format="yyyy-MM-dd 00:00:00"
   placeholder="选择日期"
/>
// 提交时操作，字符串时间-标准时间-时间戳时间
 this.contractform.startDate = Date.parse(
    new Date(this.contractform.startDate)
 )

2.禁止选择今天之前日期，或者今天之后日期

// 日期选择器其实也提供方法Picker Options
<el-date-picker
   v-model="date"
   type="date"
   size="small"
   value-format="yyyy-MM-dd"
   format="yyyy-MM-dd"
   :placeholder="'选择日期'"
   :picker-options="pickerOptions"
/>

今天之前的日期禁止选择-直接写在data里面即可

// - 8.64e7今天可选，不减今天不可选
pickerOptions: {
   disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
   }
}

不能选择今日之后的日期（今天可选-直接写在data里面即可

// - 8.64e7今天不可选 不减今天可选
pickerOptions: {
   disabledDate(time) {
      return time.getTime() > Date.now();
   }
}

---

总结：

经过这一趟流程下来相信你也对 element-ui DatePicker 日期选择器-控制选择精确到时分秒-禁止选择今天之前-或者今天之后日期 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

有什么不足的地方请大家指出谢谢 -- 風过无痕