mobiscroll插件(设置时间范围)

了解插件最好的方式就是去他的后宫 Let’s go!

1.主要问题:解决插件选择月份时默认只能选择当前月+1之前的月份

需求:我们需要的只是月份
解决方案:日期显示格式dataFormat : 'mm' 、日期排列格式 dataOrder : 'mm' 、设定时间显示范围 min/maxDate

代码实现:

		
function initcustomerindex(){

    //日期控件,增加确认事件
    setTimeout(function(){
    	
    	var y = (new Date).getFullYear(); //获取当前年份
        
        $("#dateOfBirthday").mobiscroll('option', {
        dateFormat : 'mm',
        dateOrder : 'mm', //面板中日期排列格式
        
        minDate : new Date(y + "/1/1"), //设置显示时间的范围
        maxDate : new Date(y + "/12/1"),

        onClose : function(dateVal,btn){

            if($(this).attr('id') == "dateOfloss"){
                if(btn == 'set'){
                    querydateLoss(dateVal);
                }
            }
        }
        });
    }, 300)
}

效果展示:
在这里插入图片描述
当然这是一种简单的方式,还有修改源码设置currMonth属性的方式,感兴趣的可以了解一下。
为什么要用这种方式而不用其他的属性,因为其他的属性自带格式,我们上边的格式设置会被覆盖掉的。

2. 了解莫比(Date & Time pickers)

	theme: 'android-ics light', //皮肤样式
    display: 'modal', //显示方式 
    dateFormat:'yyyy-mm',
    dateOrder:'yyyymm',
    display: 'top',  //显示位置
    mode: 'scroller', //日期选择模式
    //startYear:currYear - 20, //开始年份(有的不可以正常使用)
    //endYear:currYear,  //结束年份
    minDate: new Date(date.getFullYear(),date.getMonth()-6), //设置时间范围
    maxDate:new Date(date.getFullYear(),date.getMonth()+6),
    onCancel:function(){//点击取消按钮
    $('#appDate').val("");//清空时间
	},
	onSelect:function(){//点击确定按钮
    	search();
	},
	};

大概这些常用的属性,具体的请您移驾

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好奇新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值