实现的效果:
在这里插入图片描述

1、使用参数picker-options
建议使用参数time-arrow-control,用箭头进行选择(用鼠标滚轮操作稳定性很差)
disabledDate :控制只能选择今天及以后的日期
selectableRange :控制选择的时间段。如果是今天,则时间从此刻开始,否则从0时开始

                             <el-date-picker
                                :disabled="isDisabled"
                                :editable="false"
                                :clearable = "true"
                                v-model="ruleFormOne.starttime"
                                time-arrow-control
                                :picker-options="{
                                   disabledDate: time => {
                                      return time.getTime() < Date.now() - 3600 * 1000 * 24
                                    selectableRange: startTimeRange
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始日期"
                              </el-form-item>
    watch: {
        starttime:{
          handler(newValue, oldValue) {
            if(newValue){
                let nowDate = moment().format('YYYY-MM-DD HH:mm:ss');
                let dt = nowDate.split(" ");
                let st = '';
                if(newValue.split(" ")[0] == dt[0]){
                // 是今天,选择 的时间开始为此刻的时分秒
                  st = dt[1];
                }else{
                // 明天及以后从0时开始
                  st = '00:00:00';
                this.startTimeRange =  st + ' - 23:59:59'; 
                //例如:如果今天此刻时间为10:41:40 则选择时间范围为: 10:41:40 - 23:59:59  
                //否则为:00:00:00- 23:59:59
                    实现的效果:1、使用参数picker-options建议使用参数time-arrow-control,用箭头进行选择(用鼠标滚轮操作稳定性很差)disabledDate :控制只能选择今天及以后的日期selectableRange :控制选择的时间段。如果是今天,则时间从此刻开始,否则从0时开始                             &lt;el-date-picke...
picker-options 设定规则:时间范围最大可选择30天, 最晚时间为今天。
element-ui日期选择的组件是 el-date-picker.
设定 pickerOptions2,
 data() {
  return {
   pickerOptions2: {
    disabledDate: theDate => {
     const oneDay = 3600 * 1000 * 24
     const current = the
当开始日期选定后,
1、截止日期输入框中早于当前日期前的日期禁用
2、截止日期输入框中如果有已经禁用的日期,禁用日期中从最早的一天开始之后的日期全部禁用,只能选择开始日期当天~禁用日期中最早的一天的前一天
3、截止日期输入框中如果没有已经禁用的日期,则开始日期当天和后续的日期都可以选择
如上图,我选择的是17号那一天,那么在这里只有17-22号之前可选,后面需全部禁用掉
下面上代码:
				
需求分析: 需求要实现两个日期时间选择,第一个是日期时间范围,禁用当前时间以前(不包括今天),第二个根据第一个的结束时间,禁用结束时间以前(包括结束时间)。 解决方案: 主要思路来源于 https://www.jianshu.com/p/af5fb9d657ce 这篇文章。 日期时间选择的官方文档 https://element.eleme.io/#/zh-CN/component/datetime-picker <template> //第一个日期时间选择
1.设定禁止选择当天之后的时间实现效果 代码是在官网上拿的示例,HTML代码块如下所示(以下几种情况示例HTML代码都不变)。主要是在时间选择的标签加了个 :picker-options=“pickerOptions” 可以动态获取设定的时间段。 <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1"