精华内容
下载资源
问答
  • 近期要做一个预约功能,其中预约日期是有范围限制的,预约的时间点是按后台配置起止时间的,这就需要前端将不需要的日期和时间设置为不可选择。...日期不可选通过options属性来控制, 时间不可选通过time-picke...

    近期要做一个预约功能,其中预约日期是有范围限制的,预约的时间点也是按后台配置起止时间的,这就需要前端将不需要的日期和时间设置为不可选择。

    效果如下:

    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=...

    在项目中使用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设置当前日期往后不可选

    千次阅读 2019-09-24 15:53:01
    layui laydate设置当前日期往后不可选 laydate.render({ elem: '#demo', max: maxDate() }); // 设置最大可选的日期 function maxDate() { var now = new Date(); return now.getFullYea...

    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

    展开全文
  • checkbox其实并没有enabled属性,要使checkbox不可选的话要像下面这样DISABLED>或者用js控制:document.forms[0].MyCheckbox.disabled = true;如果浏览器支持的话,不可选状态应该是这个样子:
  • 我的需求是已经添加过的人员,下一次可以再添加了,使用复框的disabled属性。官网上的getCheckboxProps中的disabled的值是record.name==="XXX",我在用的过程中肯定是一个list,然后我就想用函数返回true或false...
  • !... 大概就是截图上的意思。 首先这个select点击是不会出现下拉框的,但同时这个下拉框要有个点击事件,用disabled的话下拉框不可选但是点击事件无效。 有没有别的适合的属性或者方法可以实现?
  • 使用javascript实现html文本不可选

    千次阅读 2014-08-22 09:56:01
    如何使用js让html中的文本不可选呢?首先想到的方法是使用css选择器来实现,如下: -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select...
  • 问题:在layui数据表格中设置了字段为type:checkbox 但是想要实现部分不显示,不可选的功能。 layui内置没有该功能,所以只能自己实现。 使用templet实现 table.render({ elem: '#junTable', url: '', cols: ...
  • 有两种方法:显示check ...一、是在callback里写回调方法,都是显示check radio的,有两种情况,一种是不可选择,一种是判断是否是父节点,是的话直接返回 callback: { beforeCheck: this.zTreeBeforeCheck,//在...
  • //过滤节点的机制 直接return node表示做任何过滤 function filter(node) { return node; } ///动态设置zTree的所有节点有checkbox function DynamicUpdateNodeCheck() { var zTree = $.fn.zTree....
  • select2 设置不可选,编辑

    千次阅读 2018-12-01 16:38:10
    .li-disabled{ pointer-events:none; disabled: true; } &lt;form:select path="usageState" class="input-large li-disabled"&gt; &lt;form:options items="...${f...
  • 设置单选框radio不可选(禁用)

    千次阅读 2021-01-13 14:10:55
    readonly属性对radio、select、checkbox这三个表单无效,设置disabled属性后,读取到值 在网络上找到思路,总结出如下三种解决方案 把表单值存入<input type="hidden" >中,如果代码中要改变选中则同时要...
  • 需求:修改公告信息时,屏幕类型(单选框)能更改 ...期望:正确控制单选框可选与否 + 可以数据传输 解决:选中的单选框正常,未被选中的单选框disabled 启发:可以把一个整体拆成多个部分,分而治之
  • 之前:element ui datePicker 设置当前日期之前的日期不可选 之后: disabledDate(time) { return time.getTime() > Date.now(); }
  • 1. 核心的代码就是这两句 picker-options="expireTimeOption" expireTimeOption : ...//disabledDate 文档上:设置禁用状态,参数为...当前日期不可选 包括今天也不可选 ,只需设置 return date.getTime() ()
  • '启用系统保护' 灰色 不可选状态: 搜了一堆解决办法,包括: 1.组策略修改 2.服务启用 3.各种重启 等,不适用。 然后,我把系统预留分区 删了,删了…… 重装了一遍 就好了 ...... ..... 这……...
  • 加一列checkbox,只需要在列的属性中加上type即可 设置部分不可选状态,设置selectable事件即可, 设置部分选中状态必须是nexttick中写,此外在table组件上加ref ...
  • (比如现在是2019-11-13 10:29:31,那就只能选择此刻以前的,尚未发生的时间不可选。)期望图如下: 实现: 1. 首先在页面引入时间控件与moment插件 import{ DatePicker }from'antd'; importmomentfrom'...
  • 设置select的指定option项不可选

    千次阅读 2015-06-19 11:07:22
    optgroup { background-color:#eee; color:444; } aaaa bbbb cccc 效果:
  • select 下拉框某一项设置为不可选

    万次阅读 2015-11-12 17:32:57
    HTML <optgroup> 标签 另外还可以设置字体,   不可选" style=“font-family:”>  value="可选">  
  • 1,月份选择器,大于当前月份的日期不可选 pickerOptions: { //大于当前月分的日期不可选 disabledDate: (time) => { var date = new Date(); var year = date.getFullYe...
  • 转载来源: https://www.cnblogs.com/lxcmyf/p/6856161.html 1. < select id ="s1" name ="s1" onfocus ="this.defaultIndex=this...."此处不可选择!" ); return false ; }); })
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;...gt
  • java方法可选参数_Java可选参数

    千次阅读 2020-07-05 23:15:52
    java方法可选参数 在Java类中设计方法时,某些参数对于其执行而言可能是可选的。 无论是在DTO,胖模型域对象还是简单的无状态服务类中,可选方法参数都是常见的。 从本文中, 您将学习如何在Java中处理可选参数 ...
  • 添加模拟器就可以了。
  • 使用到QTreeWidget做总结,以便下次使用。 QTreeWidget CalibrationWidget = new QTreeWidget; CalibrationWidget-&gt;setColumnCount(2); //将treewidget设置为两列 CalibrationWidget-&...
  • <select> <option value="">aaaa</option> 只能看不可选"></optgroup> <option value="">bbbb</option> <option value="">cccc</option>
  • ArcMap中可选图层的设置

    千次阅读 2013-07-24 17:36:02
    在使用ArcMap 时,加载图层文件(.lyr)后发现某些图层不可选。通过以下操作可解决此问题: 在内容列表中,单击按选择列出图标。该选项卡可根据图层是否可选和是否包含已选要素对图层进行自动分组。 在可选和不可...
  • 有时候,我们希望表单中的文本框是只读的,让用户能修改其中的信息,如使 的内容,"中国"两个字可以修改。实现的方式归纳一下,有如下几种。  方法1: onfocus=this.blur() 效果:  方法2:readonly...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,667,975
精华内容 667,190
关键字:

不可选也