精华内容
下载资源
问答
  • date-range-picker插件整理
    2021-07-26 10:35:27

    中文网址:Date Range Picker 中文网

    需要引用:

    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

    html容器:

    <input type="text" id="daterangepicker01">

    初始化:

    var locale = {
          "format": 'YYYY/MM/DD',
          "separator": "-",
          "applyLabel": "确定",
          "cancelLabel": "取消",
          "weekLabel": "W",
          "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
    			"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          "firstDay": 1
          };
    
    
    $('#pubDate_input').daterangepicker({
              "locale": locale,
              "singleDatePicker": true,
              "minDate": "1949/10/01"
          }, function(start, end, label) {
            //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
          });

    更多相关内容
  • Flutter插件选择器。 包括NumberPicker,DateTimePicker,ArrayPicker和默认链接选择器。 提供灵活的参数以满足各种需求。 同时,您可以通过自定义适配器扩展更多功能。 支持平台 安卓 的iOS 如何使用 # add this ...
  • jQuery dateRangePicker插件使用总结。 版本说明: 当前使用版本:2.1.25 特别说明:版本不同,部分api可能会发生变化,需要引起重点关注 效果图 关键代码片段 $("#dateTimeRange span").html(moment()....
  • 基于vue的适用于处理复杂数据的高度定制化的移动端picker插件
  • vue的picker插件

    2021-04-13 15:46:56
    效果图: github地址: https://github.com/naihe138/vue-picker 项目下载下来之后,执行yarn,yarn run ...scriptsrc="../../static/js/utils/vuePicker/vue-picker.js"type="text/javascript"></scri...

    效果图:

     

    github地址:

    https://github.com/naihe138/vue-picker

    项目下载下来之后,执行yarn,yarn run rollup,yarn run build

    使用方法:

    普通网页开发直接复制项目下的lib/vue-picker.js文件即可直接使用

    <script src="../../static/js/utils/vuePicker/vue-picker.js" type="text/javascript"></script>

        <vue-picker :data="heightPickerData"
    
          :show-toolbar="true"
    
          @cancel="cancel"
    
          @confirm="heightConfirm"
    
          :default-index="heightDefaultIndex"
    
          :visible.sync="heightPickerVisible"
    
        ></vue-picker>
    
    	new Vue({
    				el: "#question",
    				components: {
    					
    				},
    				data: {
    					height:'170',
    					heightPickerVisible:false,	
    				},
    				computed:{
    					
    					heightPickerData(){
    						let heights=[];
    						for(let i=146; i<=190;i++){
    							heights.push({label: i+'',value: i})
    						}						
    						return [heights]
    					},
    					heightDefaultIndex(){
    						if(this.height){
    							let heightIndex = this.getArrayIndex(this.heightPickerData[0],this.height);
    							let arr = [];
    							arr.push(heightIndex);						
    							return arr;	
    						}else{
    							return [0];
    						}
    											
    					},
    				},
    				created() {
    				},
    				methods: {
    					//获取元素在数组中的下标
    					getArrayIndex(arr, obj){
    						var i = arr.length;
    						while (i--) {
    								if (arr[i].label === obj) {
    										return i;
    								}
    						}
    						return -1;
    					},
    					heightPickerShow(){
    						this.heightPickerVisible=true;
    					},					
    					cancel(){
    						console.info("cancel")
    					},
    					heightConfirm(res){
    						console.info("heightConfirm",res)
    						this.height = res[0].label;
    					},
    				}
    
    			})

     

    展开全文
  • an-color-picker插件安装包.zip
  • tecDatePicker一个用于jQuery mobile的js插件,用于创建日期字段 尝试一下!! 用法 在html页面中添加 CSS-CSS / main.css 语言js文件lng / ru.js 核心文件tecDatePicker.min.js 在输入元素中添加date-role属性 ...
  • 该资源包含Angular中datetime-picker需要的js、css文件,下载之后引入项目,即可使用
  • daterangepicker是前端的一个第三方插件,用于进行日期区间的选择 长这样: 官网链接 https://www.daterangepicker.cn 2. 使用方法 下载插件,并引入css,js文件 <link rel="stylesheet" href="{% static '...

    1. 简介

    daterangepicker是前端的一个第三方插件,用于进行日期区间的选择
    长这样:

    在这里插入图片描述

    官网链接
    https://www.daterangepicker.cn

    2. 使用方法

    1. 下载插件,并引入css,js文件
    <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
    
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
        <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
    

    注意: 引入顺序, jquery >moment > daterangepicker

    或者也可以直接引用官网的cdn:

    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
    
    1. 然后将日期范围选择器附加到您想要触发它的任何内容
    <div class="input-group" style="width: 300px; margin-bottom: 10px">
    	<span class="input-group-addon">日期范围</span>
    	<input id="rangePicker" type="text" class="form-control">
    </div>
    
    $('#rangePicker').daterangepicker(options, function (start, end, label) {})
    

    3. 基本配置

    • daterangepicker没有中文包,需要手动设置中文参数,具体如下,设置后页面将显示中文
    • 所有的选项参数可以查看官方文档
    function initDateRangePicker() {
    	var options = {
    		maxDate: moment(),
            alwaysShowCalendars: true,
            showWeekNumbers: true,
            ranges: {
                  '今天': [moment(), moment()],
                  '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                  '最近7天': [moment().subtract(6, 'days'), moment()],
                  '最近30天': [moment().subtract(29, 'days'), moment()],
                  '本月': [moment().startOf('month'), moment().endOf('month')]
                    },
             // 配置中文
             locale: {
                format: 'YYYY-MM-DD',
             	separator: ' 至 ',
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '开始',
                toLabel: '结束',
                customRangeLabel: '自定义',
                weekLabel: 'W',
                daysOfWeek: ['一', '二', '三', '四', '五', '六', '日'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
                    }
                };
    

    页面效果
    在这里插入图片描述

    展开全文
  • 这里写自定义目录标题直接上源码 ...//picker插件(时间/地点/自定义) (function(){ "use strict"; var cuiPicker=function(param,fn) { var that=this, domInput=null, pickerDom=null, ...

    这里写自定义目录标题


    效果: 在这里插入图片描述

    直接上源码

    js

    //picker插件(时间/地点/自定义)
    (function(){
        "use strict";
        var cuiPicker=function(param,fn)
        {
            var that=this,
                domInput=null,
                pickerDom=null,
                initTop=0,
                itemOptionHeight=0,
                valueArr=null,//默认值数组
                valueIndexArr=[],//默认值的索引
                selectedValueArr=[],//已经选择的值
                itemsDomArr=[],//选择列表数组
                confirmBtnDom=null,//确认按钮
                cancelBtnDom=null,//取消按钮
                nowDayCount=31;
    
            /*默认值*/
            that.defaults=
            {
                    inputDom:null,//容器
                    type:"",//类型 date(日期) datetime(日期时间) time(时间) place(地点)
                    value:"",//默认值
                    maxyear:2019,//当type不为空和等于date dateTime时有用
                    minyear:1989,//当type不为空和等于date dateTime时有用
                    title:"请选择",
                    data:[["缺少data"]],
                    separate:[],//分隔字符 其的长度等于(列数-1)
                    onOk:function(selected)//点击确认回调事件
                    {
                        //console.log(selected)
                    },
                    onShow:function()//当展示picker时回调事件
                    {
    
                    },
                    onCancel:function()//当点击取消时回调事件
                    {
    
                    },
                    changeCol:function(colIndex,data)//当改变其中一列时 colIndex 为目前在选的列  data 为目前选中的行数据
                    {
    
                    }
            };
            //删除类的公用函数
            that.removeClass=function(dom,clsName)
            {
                var reg=new RegExp(clsName,"g");
                if(dom.length)
                {
                    for(var x=0;x<dom.length;x++)
                    {
                        var itemClsName=dom[x].className;
                        itemClsName=itemClsName.replace(reg,"");
                        dom[x].className=itemClsName;
                    }
                    return false;
                }
                else
                {
                    var nowClsName=dom.className;
                    nowClsName=nowClsName.replace(reg,"");
                    dom.className=nowClsName;
                    return false;
                }
    
            };
            //添加类的公用函数
            that.addClass=function(dom,clsName)
            {
                var nowClsName=dom.className;
                if(nowClsName.indexOf(clsName)===-1)
                {
                    dom.className=nowClsName+" "+clsName;
                }
                return false;
    
            };
            //属性替换
            that.extend=function(def,param){
                for(var x in param)
                {
                    if(def.hasOwnProperty(x))
                    {
                        def[x]=param[x];
                    }
                }
            };
            that.extend(that.defaults,param);
    
            var
                //计算动画
                calcOffseTop=function(contentHeight,itemHeight,Y)
                {
                    var count=0,
                        resultY=0;
                    count=Math.floor(Y/itemHeight);
                    resultY=count*itemHeight;
                    if(resultY<=-(contentHeight-itemHeight))
                    {
                        resultY=-(contentHeight-itemHeight);
                    }
                    if(resultY>=0)
                    {
                        resultY=0;
                    }
                    return resultY
                },
                //选择月份时更新对应的日
                handleUpdateDayForMonth=function()
                {
                    that.defaults.changeCol=function(colIndex,data)
                    {
                        if(colIndex===1)
                        {
                            var d=new Date(selectedValueArr[0],data,0).getDate(),
                                dayItemDom=itemsDomArr[colIndex+1];
    
    
    
                            if(d!==nowDayCount)
                            {
                                if(d>nowDayCount)
                                {
    
                                    var temHtml="";
                                    for(var x=1;x<=d-nowDayCount;x++)
                                    {
                                        var resultNowDayCount=nowDayCount+x;
                                       temHtml+='<div class="cui-picker-item-option" data-value="'+resultNowDayCount+'">'+resultNowDayCount+'</div>'
                                    }
                                    var nowHtml=dayItemDom.dom.innerHTML;
                                    //添加日
                                    dayItemDom.dom.innerHTML=nowHtml+temHtml;
                                }
                                else
                                {
    
                                    var offsetCount=nowDayCount-d;
                                    //减少日
                                    for(var y=1;y<=offsetCount;y++)
                                    {
                                        dayItemDom.dom.children[nowDayCount-y].remove();
                                    }
    
    
                                    dayItemDom.nowHelpY=0;
                                    dayItemDom.dom.style.webkitTransform='translateY('+dayItemDom.nowHelpY+'px)'
    
                                }
                                nowDayCount=d;
                            }
    
    
                        }
                    }
                },
                //处理日期的数据(2018-3-5)
                handleDateData=function()
                {
                    var datedata=[];
                    for(var dateItem=0;dateItem<3;dateItem++)
                    {
                        //年
                        if(dateItem===0)
                        {
                            var yearItemData=[],
                                maxyear=parseInt(that.defaults.maxyear),
                                minyear=parseInt(that.defaults.minyear);
                            for(var yearItem=minyear;yearItem<=maxyear;yearItem++)
                            {
                                yearItemData.push(yearItem);
                            }
                        }
                        //月
                        if(dateItem===1)
                        {
                            var monthItemData=[];
                            for(var monthItem=1;monthItem<13;monthItem++)
                            {
                                monthItem=monthItem<10?"0"+monthItem:monthItem+"";
                                monthItemData.push(monthItem)
                            }
                        }
                        //日
                        if(dateItem===2)
                        {
                            var dayItemData=[];
                            for(var dayItem=1;dayItem<=nowDayCount;dayItem++)
                            {
                                dayItem=dayItem<10?"0"+dayItem:dayItem;
                                dayItemData.push(dayItem)
                            }
                        }
                    }
                    datedata.push(yearItemData)
                    datedata.push(monthItemData)
                    datedata.push(dayItemData)
                    handleUpdateDayForMonth();
                    return datedata;
                },
                //处理时间的数据(19:39)
                handleTimeData=function()
                {
                    var timeData=[];
                    for(var timeItem=0;timeItem<2;timeItem++)
                    {
                        //时
                        var houseItemData=[];
                        for(var houseItem=0;houseItem<=23;houseItem++)
                        {
                            houseItem=houseItem<10?"0"+houseItem:houseItem;
                            houseItemData.push(houseItem);
                        }
                        //分
                        var mintuesItemData=[];
                        for(var mintuesItem=0;mintuesItem<=59;mintuesItem++)
                        {
                            mintuesItem=mintuesItem<10?"0"+mintuesItem:mintuesItem;
                            mintuesItemData.push(mintuesItem);
                        }
    
                    }
                    timeData.push(houseItemData);
                    timeData.push(mintuesItemData);
                    return timeData;
                },
                //处理三级联动(地点)
                handlePlaceData=function()
                {
    
                    that.defaults.changeCol=function(colIndex,data)
                    {
                        if(colIndex===0)
                        {
                            var city=that.defaults.data[colIndex][valueIndexArr[colIndex]].city;
    
                            if(city)
                            {
                                var temHtml="";
                                for(var cityItem=0;cityItem<city.length;cityItem++)
                                {
                                    temHtml+='<div class="cui-picker-item-option" data-value="'+city[cityItem].name+'">'+city[cityItem].name+'</div>'
                                }
                                itemsDomArr[colIndex+1].dom.innerHTML=temHtml;
                                itemsDomArr[colIndex+1].nowHelpY=0;
                                itemsDomArr[colIndex+1].dom.style.webkitTransform='translateY('+itemsDomArr[colIndex+1].nowHelpY+'px)'
                            }
                            valueIndexArr[1]=valueIndexArr[2]=-1;
                            valueArr&&valueArr.length>=3?valueArr[1]="":"";
                            valueArr&&valueArr.length>=3?valueArr[2]="":"";
                            //清空县数据
    
    
                            itemsDomArr[colIndex+2].dom.innerHTML="";
                        }
    
                        if(colIndex===1)
                        {
    
                            var area=that.defaults.data[colIndex-1][valueIndexArr[colIndex-1]].city[valueIndexArr[colIndex]].area;
    
    
                            if(area)
                            {
                                var areatemHtml="";
                                for(var areaItem=0;areaItem<area.length;areaItem++)
                                {
                                    areatemHtml+='<div class="cui-picker-item-option" data-value="'+area[areaItem]+'">'+area[areaItem]+'</div>'
                                }
                                itemsDomArr[colIndex+1].dom.innerHTML=areatemHtml;
                            }
                            else
                            {
                                itemsDomArr[colIndex+1].dom.innerHTML="";
                            }
                            itemsDomArr[colIndex+1].nowHelpY=0;
                            itemsDomArr[colIndex+1].dom.style.webkitTransform='translateY('+itemsDomArr[colIndex+1].nowHelpY+'px)'
                            valueIndexArr[2]=-1;
                            valueArr&&valueArr.length>=3?valueArr[2]="":"";
                        }
    
                    }
                    //市
                    var defaultCityData=[],//根据已经选中的省 更新市
                        defaultAreaData=[];//根据已经选中的市 更新县
    
    
                    if(valueIndexArr.length&&valueIndexArr[0]!==-1)
                    {
                        defaultCityData=that.defaults.data[0][valueIndexArr[0]].city
                    }
                    if(valueIndexArr.length&&valueIndexArr[0]!==-1&&valueIndexArr[1]!==-1)
                    {
                        defaultAreaData=that.defaults.data[0][valueIndexArr[0]].city[valueIndexArr[1]].area
                    }
    
                    that.defaults.data= [cuiPlace,defaultCityData,defaultAreaData]
    
                },
                //处理日期时间的数据(2018-3-5 19:39)
                handleDateTimeData=function()
                {
                    handleUpdateDayForMonth()
                    return handleDateData().concat(handleTimeData())
                },
    
                //根据type给data赋对应的数组
                switchType=function()
                {
                    //特定的类型
                    var type=that.defaults.type;
                    if(that.defaults.type)
                    {
                        switch(type)
                        {
                            case 'date':that.defaults.data=handleDateData();break;
                            case 'place':handlePlaceData();break;
                            case 'datetime':that.defaults.data=handleDateTimeData();break;
                            case 'time':that.defaults.data=handleTimeData();break;
                        }
                    }
                },
                //渲染html
                renderContent=function()
                {
                        switchType();
                        if(that.defaults.data&&that.defaults.data instanceof Array&&that.defaults.data.length)
                        {
                            var itemHtml='',
                                itemArr=[],
                                contentHtml='';
                            //遍历data的一级
                            itemArr=that.defaults.data;
    
                            //选择状态
                            if(selectedValueArr&&selectedValueArr.length)
                            {
                                valueArr=selectedValueArr;
                            }
                            valueIndexArr=[];
    
                            for(var x=0;x<itemArr.length;x++)
                            {
                                var optionHtml="",
                                    defaultOffseTop="",
                                    valueIndex=-1;
                                for(var y=0;y<itemArr[x].length;y++)
                                {
                                    var cls="";
                                    if(typeof itemArr[x][y]==="string"||typeof itemArr[x][y]==="number")
                                    {
                                        //默认值视图
                                        if(valueArr)
                                        {
                                            if(valueArr[x]===itemArr[x][y]+"")
                                            {
                                                cls="cui-picker-item-option-active";
                                                //默认值滑动高度
                                                defaultOffseTop=50*y;
                                                //添加默认的索引
                                                valueIndex=y;
                                            }
    
    
                                        }
    
                                        optionHtml+='<div class="cui-picker-item-option '+cls+'" data-value="'+itemArr[x][y]+'">'+itemArr[x][y]+'</div>'
                                    }
                                    else
                                    {
                                        var showValue="";
                                        showValue=itemArr[x][y].value?itemArr[x][y].value:itemArr[x][y].name;
    
    
                                        //默认值视图
                                        if(valueArr)
                                        {
    
                                            if(valueArr[x]===showValue+"")
                                            {
                                                cls="cui-picker-item-option-active";
                                                //默认值滑动高度
                                                defaultOffseTop=50*y;
                                                //添加默认的索引
                                                valueIndex=y;
                                            }
    
    
                                        }
    
                                        optionHtml+='<div  class="cui-picker-item-option '+cls+'" data-value="'+showValue+'">'+itemArr[x][y].name+'</div>'
                                    }
                                }
    
                                valueIndexArr.push(valueIndex);
    
    
    
                                itemHtml+=  '\t\t\t\t\t<div class="cui-picker-item-list">\n'+
                                                '\t\t\t\t\t<div style="-webkit-transform: translateY(-'+defaultOffseTop+'px)" class="cui-picker-item-select">\n'
                                                                +optionHtml+
                                                '\t\t\t\t\t</div>\n' +
                                                '\t\t\t\t\t<div class="cui-picker-item-selected"></div>\n'+
                                            '\t\t\t\t\t</div>\n';
    
                            }
                            contentHtml='\t<div class="cui-picker-shelter">\n' +
                                        '\t\t<div class="cui-picker-content">\n' +
                                        '\t\t\t<div class="cui-picker-header">\n' +
                                        '\t\t\t\t<div class="cui-picker-header-left">取消</div>\n' +
                                        '\t\t\t\t<div class="cui-picker-header-title">'+that.defaults.title+'</div>\n' +
                                        '\t\t\t\t<div class="cui-picker-header-right">确认</div>\n' +
                                        '\t\t\t</div>\n' +
                                        '\t\t\t<div class="cui-picker-item">\n'
                                                +itemHtml+
                                        '\t\t\t</div>\n' +
                                        '\t\t</div>\n' +
                                        '\t</div>\n' ;
                            //创建picker容器
                            pickerDom=document.createElement("div");
                            pickerDom.className="cui-picker";
                            pickerDom.innerHTML=contentHtml;
                            document.body.appendChild(pickerDom);
                        }
                        else
                        {
                            console.log("缺少data或data格式错误")
                        }
                },
                //input的点击事件
                bindInputClicEvent=function()
                {
                    domInput?domInput.addEventListener("click",function()
                    {
                        that.showPicker();
                    }):"";
                },
                //picker内点击事件
                bindClickEvent=function()
                {
                    confirmBtnDom.addEventListener("click",function(e)
                    {
                        //获取选中的值
                        var res={
                            array:selectedValueArr,
                            string:handleFormatFromArr(selectedValueArr)
                        }
    
                        //点击确认之后的回调
                        that.defaults.onOk.call(that,res);
                        if(domInput)
                        {
                            if(domInput.tagName==='INPUT')
                            {
                                domInput.value=res.string
                            }
                        }
                        that.hidePicker();
                    });
                    cancelBtnDom.addEventListener("click",function()
                    {
                        valueIndexArr=[];
                        selectedValueArr=[];
                        that.hidePicker();
                        that.defaults.onCancel();
                    });
    
                },
                //触控事件
                bindTouchEvent=function(index,dom)
                {
                    dom.addEventListener("touchstart",function(e)
                    {
                        itemsDomArr[index].dom.style.transition="";
                        itemsDomArr[index].startY=e.changedTouches[0].pageY;
                        itemsDomArr[index].nowY=itemsDomArr[index].nowHelpY
                        itemsDomArr[index].timeInterval=setInterval(function(){
                            itemsDomArr[index].time++
                        },10)
                    });
                    dom.addEventListener("touchmove",function(e)
                    {
                        e.preventDefault();//去掉ios的橡皮筋效果
                        itemsDomArr[index].moveY=e.changedTouches[0].pageY-itemsDomArr[index].startY;
    
                        itemsDomArr[index].dom.style.webkitTransform="translateY("+parseInt(itemsDomArr[index].nowY+itemsDomArr[index].moveY)+"px)"
                        itemsDomArr[index].nowHelpY=parseInt(itemsDomArr[index].nowY+itemsDomArr[index].moveY)
                    });
                    dom.addEventListener("touchend",function(e)
                    {
                        clearInterval(itemsDomArr[index].timeInterval);
                        itemsDomArr[index].direction=itemsDomArr[index].moveY;
                        itemsDomArr[index].speed=itemsDomArr[index].direction/itemsDomArr[index].time;
    
                        var continueMoveY=0;
    
    
                        itemsDomArr[index].startY=0;
                        itemsDomArr[index].time=0;
                        itemsDomArr[index].nowY=itemsDomArr[index].nowHelpY;
    
    
                        itemsDomArr[index].dom.style.transition="all .5s";
                        if(itemsDomArr[index].moveY)
                        {
                            //根据速度 添加缓冲
                            continueMoveY=+(parseInt(itemsDomArr[index].speed)*8);
                            //缓冲移动距离
                            var shouldY=calcOffseTop(itemsDomArr[index].dom.offsetHeight,itemOptionHeight,itemsDomArr[index].nowY+continueMoveY);
                            //目前选择索引
                            itemsDomArr[index].index=Math.abs(shouldY/itemOptionHeight);
                            //动起来
                            itemsDomArr[index].dom.style.webkitTransform="translateY("+parseInt(shouldY)+"px)";
                            //选择的高亮
                            that.removeClass(itemsDomArr[index].dom.children,"cui-picker-item-option-active");
                            that.addClass(itemsDomArr[index].dom.children[itemsDomArr[index].index],"cui-picker-item-option-active");
                            itemsDomArr[index].nowHelpY=shouldY;
                            valueIndexArr[index]=itemsDomArr[index].index;
                            //给要返回的结果数组赋值(已经选中的值)
                            itemsDomArr[index].value=selectedValueArr[index]=itemsDomArr[index].dom.children[itemsDomArr[index].index].dataset["value"];
                            //调用列改变时api
                            that.defaults.changeCol.call(that,index,that.defaults.data[index][itemsDomArr[index].index])
    
                        }
                        itemsDomArr[index].moveY=0;
    
                    })
                },
                init=function()
                {
                    if(that.defaults.inputDom)
                    {
                        if(typeof that.defaults.inputDom==="string")
                        {
                            domInput=document.querySelector(that.defaults.inputDom);
                        }
                        else if (typeof that.defaults.inputDom==="object"&&that.defaults.inputDom.tagName)//这里可能埋了个坑
                        {
                            domInput=that.defaults.inputDom;
                        }
                        if(domInput)
                        {
                            if(domInput.tagName==='INPUT')
                            {
                                domInput.readOnly=true;
                            }
                        }
                    }
    
                    bindInputClicEvent();
                    //that.showPicker();
                },
                //(从字符串里面)处理默认值的格式
                handleFormat=function(v)
                {
                  var separateArr=that.defaults.separate,
                      value=v;
                  if(separateArr&&separateArr instanceof Array&&separateArr.length)
                  {
                      separateArr.map(function(item){
                          value=value.replace(item," ")
                      })
                  }
                  return value;
                },
                //(从数组里面)处理默认值的格式
                handleFormatFromArr=function(vArr)
                {
                    var separateArr=that.defaults.separate,
                        valueArr=vArr,
                        result="";
                    if(separateArr&&separateArr instanceof Array&&separateArr.length)
                    {
                        valueArr.map(function(item,index){
                            var sep="";
                            if(separateArr[index])
                            {
                                sep=separateArr[index];
                            }
                            else
                            {
                                sep=" ";
                            }
                            result+=item+sep;
                        })
                    }
                    else
                    {
                        result=valueArr.join(" ")
                    }
                    return result.trim();
                },
                getDefault=function()
                {
                    if(that.defaults.type||!(that.defaults.separate instanceof Array)||!that.defaults.separate.length)
                    {
                        switch (that.defaults.type)
                        {
                            case "date":that.defaults.separate=["-","-"];break;
                            case "datetime":that.defaults.separate=["-","-"," ",":"];break;
                            case "time":that.defaults.separate=[":"];break;
                        }
                    }
                    //获取默认值
                    if(that.defaults.value)
                    {
                        valueArr=handleFormat(that.defaults.value.trim()).trim().split(" ");
                    }
                    else if(domInput)
                    {
                        var inputvalue=handleFormat(domInput.value.trim());
                        valueArr=inputvalue?inputvalue.split(" "):null;
                    }
                };
            //显示picker
            that.showPicker=function(newParam)
            {
    
                if(!pickerDom)
                {
                    getDefault();
                    //新赋值
                    newParam?that.extend(that.defaults,newParam):"";
                    renderContent();
                    var itemsContentDom=pickerDom.children[0].children[0].children[1].children;
                    //获取初始top
                    initTop=itemsContentDom[0].children[1].offsetTop;
                    itemOptionHeight=itemsContentDom[0].children[0].children[0].offsetHeight;
                    //获取item dom
                    for(var j=0;j<itemsContentDom.length;j++)
                    {
                        itemsContentDom[j].children[0].style.top=initTop+"px";
    
                        var value=valueArr?valueArr[j]:(itemsContentDom[j].children[0].children[0]?itemsContentDom[j].children[0].children[0].dataset['value']:"");
                        //给要返回的结果数组赋值(已经选中的值)
    
                        selectedValueArr[j]=value;
                        itemsDomArr.push(
                            {
                                dom:itemsContentDom[j].children[0],
                                startY:0,
                                moveY:0,
                                nowY:0,
                                selectedTop:initTop,
                                speed:0,
                                time:0,
                                timeInterval:null,
                                direction:0,
                                nowHelpY:valueIndexArr[j]!==-1?parseInt("-"+valueIndexArr[j])*50:0,
                                index:0,
                                value:value
                            });
                        bindTouchEvent(j,itemsContentDom[j]);
                    }
    
    
                    //获取确认按钮
                    var headerDom=pickerDom.children[0].children[0].children[0];
                    confirmBtnDom=headerDom.children[2];
                    //获取取消按钮
                    cancelBtnDom=headerDom.children[0];
                    bindClickEvent();
    
                    //展示动画
                    setTimeout(function(){
                        that.addClass(pickerDom,"cui-picker-active");
                    },0)
                    //展示后的回调
                    that.defaults.onShow.call(that);
                }
            }
    
            //隐藏picker
            that.hidePicker=function()
            {
                that.removeClass(pickerDom,"cui-picker-active");
                setTimeout(function(){
                    //销毁
                    pickerDom.remove();
                    pickerDom=null;
                    itemsDomArr=[];
                },600)
            };
    
            init();
    
    
        };
        window.cuiPicker=cuiPicker;
    })();
    

    css

    /*picker插件*/
    .cui-picker
    {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:9999;
        overflow:hidden;
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
        transition: all 0.6s;
    
    }
    
    
    .cui-picker .cui-picker-shelter
    {
        width:100%;
        height:100%;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.48);
        -webkit-transition: opacity .6s;
        -moz-transition: opacity .6s;
        -ms-transition: opacity .6s;
        -o-transition: opacity .6s;
        transition: opacity .6s;
    }
    .cui-picker-active .cui-picker-shelter
    {
        opacity: 1;
    }
    
    .cui-picker .cui-picker-content
    {
        height:50%;
        width:100%;
        background-color:white;
        position:absolute;
        bottom:-50%;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
        flex-flow: column;
        -webkit-transition: bottom .6s;
        -moz-transition: bottom .6s;
        -ms-transition: bottom .6s;
        -o-transition: bottom .6s;
        transition: bottom .6s;
    }
    .cui-picker-active .cui-picker-content
    {
        bottom:0;
    }
    .cui-picker-item
    {
        -webkit-box-flex:1;
        -webkit-flex:1;
        flex:1;
    }
    .cui-picker .cui-picker-header
    {
        height:2rem;
        position:relative;
        color:#696666;
    }
    
    .cui-picker-header .cui-picker-header-left
    {
        height:100%;
        min-width:3rem;
        text-align: left;
        padding-left:.5rem;
        line-height: 2rem;
        position:absolute;
        left:0;
        top:0;
        z-index:2;
    }
    .cui-picker-header .cui-picker-header-title
    {
        width:60%;
        height:100%;
        margin:0 auto;
        text-align: center;
        line-height: 2rem;
    }
    .cui-picker-header .cui-picker-header-right
    {
        height:100%;
        min-width:3rem;
        text-align: right;
        padding-right:.5rem;
        line-height: 2rem;
        position:absolute;
        right:0;
        top:0;
        z-index:2;
    
    }
    .cui-picker-item
    {
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
    }
    .cui-picker-item .cui-picker-item-list
    {
        height:100%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex:1;
        position:relative;
        overflow:hidden;
    }
    
    .cui-picker-item-list .cui-picker-item-selected
    {
        width:80%;
        height:50px;
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        border-bottom:1px solid #61d8ff;
    }
    .cui-picker-item-select
    {
        width:100%;
        position:absolute;
        left:0;
    
    }
    .cui-picker-item-select .cui-picker-item-option
    {
        height:50px;
        text-align: center;
        line-height: 50px;
        color:gray;
    }
    .cui-picker-item-select .cui-picker-item-option-active
    {
        color:#2a70d0;
    }
    

    用法

    <!DOCTYPE html>
    <html>
    <head>
    	<title>picker插件</title>
    	<meta charset="utf-8">
    	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
    	<link rel="stylesheet" href="../css/cui.css">
    </head>
    <body>
    <div class="cui-content">
    	<form class="cui-form">
    		<a  href="javascript:void(0);" class="cui-input cui-input-link">
    			<div class="label">手机</div>
    			<input placeholder="请选择手机" value="" id="test">
    		</a>
    
    		<a  href="javascript:void(0);" class="cui-input cui-input-link">
    			<div class="label">时间</div>
    			<input placeholder="请选择时间" value="" id="time">
    		</a>
    
    		<a  href="javascript:void(0);" class="cui-input cui-input-link">
    			<div class="label">日期</div>
    			<input placeholder="请选择时间" value="" id="date">
    		</a>
    
    		<a  href="javascript:void(0);" class="cui-input cui-input-link">
    			<div class="label">地区</div>
    			<input placeholder="请选择地区" value="" id="place">
    		</a>
    	</form>
    	<div class="cui-btn cui-btn-primary cui-btn-block" style="margin:5px;" "showPicker()">点击显示picker</div>
    </div>
    <!--<div class="cui-picker">
    	<div class="cui-picker-shelter">
    		<div class="cui-picker-content">
    			<div class="cui-picker-header">
    				<div class="cui-picker-header-left">取消</div>
    				<div class="cui-picker-header-title">请选择</div>
    				<div class="cui-picker-header-right">确认</div>
    			</div>
    			<div class="cui-picker-item">
    				<div class="cui-picker-item-list" id="test1">
    					<div class="cui-picker-item-select" id="test">
    						<div class="cui-picker-item-option">1</div>
    						<div class="cui-picker-item-option">2</div>
    						<div class="cui-picker-item-option">3</div>
    						<div class="cui-picker-item-option">4</div>
    						<div class="cui-picker-item-option">5</div>
    						<div class="cui-picker-item-option">6</div>
    						<div class="cui-picker-item-option">7</div>
    						<div class="cui-picker-item-option">8</div>
    						<div class="cui-picker-item-option">9</div>
    						<div class="cui-picker-item-option">10</div>
    						<div class="cui-picker-item-option">11</div>
    						<div class="cui-picker-item-option">12</div>
    						<div class="cui-picker-item-option">13</div>
    						<div class="cui-picker-item-option">14</div>
    					</div>
    					<div class="cui-picker-item-selected"></div>
    				</div>
    
    				<div class="cui-picker-item-list"></div>
    
    				<div class="cui-picker-item-list"></div>
    			</div>
    
    		</div>
    	</div>
    </div>-->
    
    </body>
    <script src="../js/place.js"></script>
    <script src="../js/cui-picker.js"></script>
    <script>
    	//绑定input
    	var picker=new cuiPicker({
    								inputDom:document.getElementById("test")
    	})
    	//没有绑定input
    	var picker1=new cuiPicker();
    
    	function showPicker()
    	{
    		picker1.showPicker({data:[
    				[
    					{name:"广东",value:"广东",id:"1"}
    				],
    				[
    					{name:"广州",value:"广州",id:"2"},
    					{name:"茂名",value:"茂名",id:"2"},
    					{name:"中山",value:"中山",id:"3"},
    					{name:"深圳",value:"深圳",id:"4"},
    					{name:"珠海",value:"珠海",id:"5"},
    					{name:"江门",value:"江门",id:"6"}
    				]
    			]});
    	}
    	//时间
    
    	var picker2=new cuiPicker({
    				type:"time",
    				inputDom:document.getElementById("time")
    	})
    
    	//日期时间
    	var picker3=new cuiPicker({
    		inputDom:document.getElementById("date"),
    		type:"datetime"
    
    	})
    
    	//地点
    	var p=new cuiPicker({
    		inputDom:document.getElementById("place"),
    		type:"place"
    	})
    </script>
    <script>
    </script>
    </html>
    
    

    *github:https://github.com/flying0917/cui.github.io/blob/gh-pages/js/cui-picker.js
    *例子(目前本人维护的原生移动端前端框架cui):https://flying0917.github.io/cui.github.io/
    *希望可以互相交流技术也欢迎纠正

    展开全文
  • 1.页面中嵌入selectpicker,需要将class属性设为“selectpicker” <select id="bankname" class="selectpicker"><option>---请选择---</option></select> 2.利用ajax填充下拉框 $(".select...
  • jqweui的picker动态加载数据 ...但是有一个问题,前台要求的数据一般是key,value的形式,而picker插件只能接收单列数组。我是这么解决的,把要显示的key作为一个数组返回,其他的属性创建一个对象数组存起来。
  • datetime-picker文件夹DatePicker.js中 找到 三处 year-month //1. if (this.type === 'year') result.splice(1, 4); //2. if (this.type === 'year') { month = 1 date = 1; } //3. if (this.type === 'year') {...
  • 1.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场 2.导入成功后,在src文件夹下多一个uni_modules的文件夹 3.引入插件 import uniDataPicker from '@/uni_modules/uni-data-...
  • 1.详情参考:https://github.com/zhoushengmufc/iosselect2.效果(1)一级级联,银行选择(http://zhoushengfe.com/iosselect/demo/one/bank.html)(2)二级级联,三国杀将领组合选...
  • javascript移动端选择器picker插件

    万次阅读 2017-02-11 19:36:20
    开题:得益于项目的上线,现在终于有时间来写一点点的东西...这次分享的是一个基于jquery/zepto的选择器插件 github地址:https://github.com/jinghaoo/mobile-selector 相信对于移动开发有过经验的同学都对UI的不
  • city-picker 城市选择插件
  • selectpicker下拉框插件

    2018-09-20 15:38:18
    selectpicker下拉框插件
  • Failed to install 'cordova-plugin-telerik-imagepicker': Error: cordova-plugin-telerik-imagepicker cannot be added. <edit-config> changes in this plugin conflicts with <edit-config> changes...
  • 在开发过程中可能根据需要设置一个默认的时间段,在网上看了很多相关的信息,大多数都显得很笼统并且麻烦,研究了一下el-date-picker 插件的属性,发现了一个比较简单的方法,来跟大家分享一下。 1.需求分析 当用户...
  • cordova-plugin-telerik-imagepicker 插件问题

    千次阅读 2019-09-23 14:54:03
    错误信息如下: Didn't find class "android.support.v4.graphics.drawable....cordova-plugin-telerik-imagepicker插件需指定Android Support 库版本为v23 解决方法: 添加cordova-android-support-gradle-rel...
  • 这个是关于bootstrap-selectpicker的多选框测试用例,大家可以简单的借鉴一下。
  • 关于jQuery的city-picker插件的使用

    千次阅读 2017-12-11 18:25:31
    首先明确city-picker插件的使用方式有两种:HTML代码方式、JS代码方式。 不管使用哪种方式,首先我们要导入jquery.js、city-picker.css、city-picker.data.js、city-picker.js文件。 然后,我们直接上代码查看...
  • 移动端picker插件

    2017-06-20 13:15:00
    项目需要,要做移动端网页,比如选择出生日期什么的。可笑weui给的控件,竟然选择后的数据不准确。 于是自己写了一个。 链接: ... 注:个人的东西,只适合讨论研究,请勿正式项目用。...
  • bootstrap-select selectpicker插件的使用 添加全选的问题

    万次阅读 多人点赞 2016-07-07 18:23:22
    *关于selectpicker这个插件的使用,请查看官文档https://silviomoreto.github.io/bootstrap-select/examples/ *这里有关于初始化时的所有选项及作用,还有所有方法的应用 *本屌也是google很久才找到的。。。。。。...
  • 一个vue3插件选择从杰拉里日期和时间从迁移 运行这个项目 # 安装依赖 yarn # OR npm install # 启动服务 yarn serve # OR npm run serve 迁移档案 1,VuePersianDatetimePicker.vue:①模型=> modelValue②发射...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,571
精华内容 4,628
关键字:

picker插件

友情链接: mirrors-vue-js-dev.zip