mobiscroll实现年月日分别选择

mobiscroll实现年月日分别选择

感谢向上爬的蜗牛提供的mobiscroll破解版
http://blog.csdn.net/abld99/article/details/53542041

最近微信项目需要实现分别输入年月日的选项，网上找了很多最终效果如下

头部引入：

<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-3.0.0-beta2.min.css"/>  
<script src="js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript" charset="utf-8"></script>

HTML代码：

<input id="integer1" placeholder="年" />
<input id="integer2" placeholder="月" />  
<input id="integer3" placeholder="日" />

JS部分：

//年
var instance1 = mobiscroll.number('#integer1', {
        lang: 'zh',
        display: 'bottom',
        layout: 'fixed',
        step: 1,  //前后数字差，可根据这个参数来设置2468之类的数字选择
        min: 2000,  //最小数字
        max: 2017,  //最大数字
        width: 120,     
        defaultValue:2000,  //刚显示出来时选择的数字
        theme:'ios'  //主题
 });

 //月
 var instance2 = mobiscroll.number('#integer2', {
        lang: 'zh',
        display: 'bottom',
        layout: 'fixed',
        step: 1,  //前后数字差，可根据这个参数来设置2468之类的数字选择
        min: 1,  //最小数字
        max: 12,  //最大数字
        width: 120,     
        defaultValue:1,  //刚显示出来时选择的数字
        theme:'ios'  //主题
 });

//监听年月值输入的变化，来设置天数
$('#integer2,#integer1').bind('change',function(){
    if($('#integer3').val()==''){
        var instance3 = mobiscroll.number('#integer3', {
              lang: 'zh',
              display: 'bottom',
              layout: 'fixed',
              step: 1,        
              min: 1,         
              max:getDays($('#integer1').val(),$('#integer2').val()),
              width: 120,     
              defaultValue:1,    //刚显示出来时选择的数字
              theme:'ios'      //主题
            });
    }else{
        //所选天数大于第二次选择后的实际天数
        if($('#integer3').val()>getDays($('#integer1').val(),$('#integer2').val())){
            $('#integer3').val('');
        }
    }
 })

 //获取天数
 function getDays(year,mouth){
        //定义当月的天数；
        var days ;
        //当月份为二月时，根据闰年还是非闰年判断天数
        if(mouth == 2){
            days= year % 4 == 0 ? 29 : 28;
        }
        else if(mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth ==12{
            //月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
            days= 31;
        }
        else{
            //其他月份，天数为：30.
            days= 30;
        }
        return days;
    }
})

demo

下载完整[demo]