近期要做一个预约功能，其中预约日期是有范围限制的，预约的时间点也是按后台配置起止时间的，这就需要前端将不需要的日期和时间设置为不可选择。
 
效果如下：
 
1、日期按照后台返回，控制能选择的日期。
 
2、时间的话，过滤了不可选时间。
 
 
 
 
这里使用的是iview的DatePicker组件，type为datetime
 
日期不可选通过options属性来控制， 时间不可选通过time-picker-options属性来控制
 
代码示例如下,可copy到iview这里运行查看效果：https://run.iviewui.com/S10Xjfll
 
<template>
   
    <br>
    <DatePicker v-modal="time" :options="options3" :time-picker-options="{steps: [1,60],disabledHours: disabledHours,hideDisabledOptions:true}" type="datetime" format="yyyy-MM-dd HH:mm":editable="false" placeholder style="width: 200px"></DatePicker>
    <br>   

</template>
<script>
    export default {
        data(){
          return {
            steps: [1, 60],//下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。我这里只让选择整点，所以分钟间隔设置为60
            disabledHours: [0,1,2],
            ableDates:[],
            options3: {
             disabledDate :(date)=> {
               //这里写上自己的逻辑，返回true，表示当前日期需要设置为不可选
                 var disabled=true;
                 if (date.getTime()>=this.ableDates[0] && date.getTime()<=this.ableDates[this.ableDates.length-1]) {
                     disabled=false;
                 }
                 return disabled;
              }
         },
             disabled: false,
            time:''            

          }
        },
       mounted () {
         this.getDisabledHours();
         this.getAbledDates();
       },
       methods: {
          getDisabledHours(){
            //实际逻辑，是调接口获得能显示的时间点list,再算出需要设置为不可选的时间点，这里写死数组数据
             let array = [0,1,2,3,4,5,20,21,22,23];                  

             this.disabledHours=array;    
         },
         getAbledDates(){
            //实际逻辑，是调接口获得能显示的日期list,这里写死数组数据
           let res=[1563811200000,1563897600000,1564070400000,1564156800000];
           
                        for (let i = 0; i < res.length; i++) {
                            var dateUnix=res[i];
                            var date=new Date(dateUnix);
                            this.ableDates.push(date);
                        }
                    
         }
       }
    }
</script>
 
 
 
 

在项目中使用Element UI 日历控件，本人遇到的场景是某个时间到当天时间可选，其他不可选，代码如下：
 dom:
 
 <el-date-picker
      v-model="ruleForm1.date"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
      :picker-options="pickerOptions1"    //这里设置时间段，动态获取
      >
 </el-date-picker>
 
下面用到计算属性，动态获取时间并刷新日历
 
computed: {  
    pickerOptions1() {
       var _this=this;
       return {
         disabledDate(time) {
           var time1 = _this.startTime;// 动态起始时间 ，这个时间是已经得到的时间戳
           return time.getTime() > Date.now() || time.getTime() < time1;
         }
       }
     }
  },
  也可以设置某个时间作为起始时间
	data () {
	    return {
	    	pickerOptions1: {
	     		disabledDate(time) {
			        var date = new Date('2019-05-24 23:06:31');         
			        var time1 = date.getTime();//得到时间戳
	                return time.getTime() > Date.now() || time.getTime() < time1;
	        	 },
	        }, 
	     }
	 }
 
还有其他场景，如当天时间的前三个月可选，其他不可选
 
data (){
   return {
       pickerOptions1: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        },  
   }     
} 
 
设置当天之后的时间可选
 
  <el-date-picker
          style="width:195px"
          value-format="yyyy-MM-dd"
          v-model="form.start_date"
          type="date"
          :picker-options="pickerOptions1"
          placeholder="选择日期">
        </el-date-picker>
...

    data() {
      return {
        pickerOptions1: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//当天之后的时间可选
            return time.getTime() > Date.now() - 8.64e7;//当天之前的时间可选
            return time.getTime() > Date.now() ;//当天之前的时间可选---不包括当天
          },
        }       
      }
    }
 
这种方式是实现了，但是这个方法不是很好；这个做法内部是循环遍历所有日期 性能很差。如果大家有什么好的方法欢迎评论哦！一起加油！

最近在业务需求开发中，需要对结汇资金属性的下拉选项进行控制。需求原本是要求对于不可选的属性，用户点击后默认显示请选择。修改完成后，需求又变更为还是让属性显示出来，另外在别的地方去控制流程终止。哎，对业务的需求变更是最无力吐槽了，。最疯狂的遇到过，对于一个需求一天变一次，连续改了三个版本，真是累死宝宝了。
 
现在给大家提供最初的需求，不可选的属性置灰，用户点击后默认回到请选择的属性。
 
先把html代码贴一下：
 
<td align="left" class="Tip_Content">
 <select id="text_fxAttribute" class="input_long13" οnchange="javascript:checkOptValue()">
 <option id="oPlsChoose" value="999"></option>
 <option value="666" style="color:gray" id="oCargoTrade"></option>
 <option value="666" style="color:gray">运输</option>
 <option id="oTravel" value="122"></option>
 <option value="666" style="color:gray">金融和保险服务</option>
 <option value="666" style="color:gray">专有权利使用费和特许费</option>
 <option id="oReferService" value="125"></option>
 <option value="666" style="color:gray">其他服务</option>
 <option value="131" style="color:gray">职工报酬和赡家款</option>
 <option value="666" style="color:gray">投资收益</option>
 <option value="666" style="color:gray">其他经常转移</option>
 <option value="666" style="color:gray">资本账户</option>
 <option value="666" style="color:gray">投资资本金</option>
 <option value="666" style="color:gray">直接投资撤资</option>
 <option value="666" style="color:gray">房地产</option>
 <option value="666" style="color:gray">其他直接投资</option>
 <option value="666" style="color:gray">对境外证券投资撤回</option>
 <option value="666" style="color:gray">证券筹资</option>
 <option value="666" style="color:gray">其他投资</option>
 <option value="666" style="color:gray">国内外汇贷款</option>
 <option value="270">经批准的资本其他</option>
 </select>
 </td>
 
 

 
 
selected框选择事件的控制。value值为666的点击后默认显示请选择。
 
function checkOptValue(){
 if(document.getElementById("text_fxAttribute").value == "666") {
 document.getElementById("text_fxAttribute").options[0].selected=true;
 
 
return；  
 
｝
 
在select标签中加入οnchange="javascript:checkOptValue()"即可实现。谢谢参阅。

 
 
layui laydate设置当前日期往后不可选
 
 
 
  
    laydate.render({
        elem: '#demo',
        max: maxDate()
    });
// 设置最大可选的日期
function maxDate() {
    var now = new Date();
    return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
}
 
 
 
 
 
 
 
转载于:https://www.cnblogs.com/xiaonangua/p/9553377.html