资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

利用My97DatePicker实现年份多选-创新互联

昨天,咱们尝试使用Kalendae实现年份的多选事件,结果发现,该插件不能实现月份以及年份的选择,更不必说年份的多选的事件了。笔者也不愿多做深究,既然My97DatePicker可以定义选择年份,何不简单的改写改写它。笔者秉着这个思路,继续往皮毛之下探索。
先看一下My97DatePicker的习性,俗语讲知己知彼,是吧。这个插件调用之后会改变调用位置的显示内容为当前选择日期。而且还可以给点击位置之外的地方,赋值(笔者就准备利用这点)。
一、通过My97DatePicker自带img

成都创新互联公司服务热线:13518219792,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联公司网页制作领域十余年,包括iso认证等多个方面拥有丰富的网站营销经验,选择成都创新互联公司,为网站保驾护航!

    

二、通过My97DatePicker插件重新赋值的事件,定义多选函数

var already_select_year = [];//已将选择的年份数组,若存在刷新当前。此处的初始值应为,封装数据所得。并且初始化加载时,应同步显示已选择的年份。
            function get_real_select_year(){
                var nowYear = $("#real_function_position").val();
                //判断,当前年份是否为空
                if(nowYear != null & nowYear != ''){
                    //判断,当前年份,是否在选的数组中
                    var index = $.inArray(nowYear, already_select_year);
                    if(index > -1){//含有该列,则不做处理
                        return;
                    }else{//展示,用户的选择。并数组存储
                        already_select_year.push(nowYear);
                        //展示
                        document.getElementById("show_user_select").innerHTML +=
                            "" + nowYear + " "
                    } 
                }else{
                    return;
                }
            }

三、年份选择后的删除

//删除,当前所选年份事件
            function delete_select(id){
                //数组中除去,该元素
                delete_shuzu(already_select_year, id);
                //清除,用户输入显示
                $("#"+ id).remove();
            }
            //删除数组中的元素
            function delete_shuzu(arry, obj){
                for (var i = 0; i < arry.length;  i++){
                    if(arry[i] == obj){
                        arry.splice(i, 1);
                        break;
                    }       
                }
            }

四、贴出整体代码

 
        
            
                
                My97DatePicker实现年份多选
            
                
                
            
            
                

五、实现效果
利用My97DatePicker实现年份多选
笔者认为,定会有比这更好的实现方式。或者笔者写的还有未知的bug,期待有兴趣的人继续探究。笔者现在在想,不玩游戏干点啥呢。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文标题:利用My97DatePicker实现年份多选-创新互联
网页地址:http://cdkjz.cn/article/dgpcio.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220