-
2021-07-26 10:35:27
需要引用：
<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_picker:Flutter Picker插件
2021-05-11 13:18:18Flutter插件选择器。 包括NumberPicker，DateTimePicker，ArrayPicker和默认链接选择器。 提供灵活的参数以满足各种需求。 同时，您可以通过自定义适配器扩展更多功能。 支持平台 安卓 的iOS 如何使用 # add this ... -
jQuery dateRangePicker插件使用方法详解
2020-12-08 19:22:59jQuery dateRangePicker插件使用总结。 版本说明： 当前使用版本：2.1.25 特别说明：版本不同，部分api可能会发生变化，需要引起重点关注 效果图 关键代码片段 $("#dateTimeRange span").html(moment().... -
基于vue的适用于处理复杂数据的高度定制化的移动端picker插件
2019-08-11 20:13:59基于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
2022-04-03 23:09:48an-color-picker插件安装包.zip -
tecDatePicker:jQuery Mobile Date Picker插件
2021-05-14 02:40:41tecDatePicker一个用于jQuery mobile的js插件，用于创建日期字段 尝试一下！！ 用法 在html页面中添加 CSS-CSS / main.css 语言js文件lng / ru.js 核心文件tecDatePicker.min.js 在输入元素中添加date-role属性 ... -
Angular中datetime-picker插件资源
2018-10-12 10:40:52该资源包含Angular中datetime-picker需要的js、css文件，下载之后引入项目，即可使用 -
daterangepicker插件快速上手
2021-05-15 23:57:45daterangepicker是前端的一个第三方插件，用于进行日期区间的选择 长这样: 官网链接 https://www.daterangepicker.cn 2. 使用方法 下载插件，并引入css,js文件 <link rel="stylesheet" href="{% static '...展开全文1. 简介
daterangepicker是前端的一个第三方插件，用于进行日期区间的选择
长这样:
官网链接
https://www.daterangepicker.cn2. 使用方法
- 下载插件，并引入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"/>- 然后将日期范围选择器附加到您想要触发它的任何内容
<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 } };页面效果
-
【cui】javascript原生picker插件 手机端（时间/日期/地点三级联动/自定义）
2019-04-02 16:54:52这里写自定义目录标题直接上源码 ...//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/
*希望可以互相交流技术也欢迎纠正
-
bootstrap-selectpicker插件的运用
2019-07-31 09:30:341.页面中嵌入selectpicker,需要将class属性设为“selectpicker” <select id="bankname" class="selectpicker"><option>---请选择---</option></select> 2.利用ajax填充下拉框 $(".select... -
jqweui的picker插件动态加载数据
2017-12-22 21:02:51jqweui的picker动态加载数据 ...但是有一个问题，前台要求的数据一般是key,value的形式，而picker插件只能接收单列数组。我是这么解决的，把要显示的key作为一个数组返回，其他的属性创建一个对象数组存起来。 -
vant 中 datetime-picker 插件封装只取年
2022-03-12 11:49:21datetime-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') {... -
uniapp使用uni-data-picker插件实现省市区弹窗（兼容app）
2022-03-03 22:38:431.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场 2.导入成功后，在src文件夹下多一个uni_modules的文件夹 3.引入插件 import uniDataPicker from '@/uni_modules/uni-data-... -
iosselect移动端H5的picker插件（一到多级联动，时间日历插件）
2021-06-14 06:10:041.详情参考：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 城市选择插件
2018-11-07 10:36:36city-picker 城市选择插件 -
selectpicker下拉框插件
2018-09-20 15:38:18selectpicker下拉框插件 -
ionic5/angular11添加Image Picker插件错误Error: cordova-plugin-telerik-imagepicker cannot be added....
2021-05-19 19:21:26Failed 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... -
element el-date-picker 插件设置显示默认开始时间和结束时间
2020-03-11 09:09:14在开发过程中可能根据需要设置一个默认的时间段，在网上看了很多相关的信息，大多数都显得很笼统并且麻烦，研究了一下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多选框插件的demo源码
2018-11-26 12:02:02这个是关于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-persian-datetime-picker:这是一个Vue3版本的vue3-persian-datetime-picker
2021-03-16 17:20:29一个vue3插件选择从杰拉里日期和时间从迁移 运行这个项目 # 安装依赖 yarn # OR npm install # 启动服务 yarn serve # OR npm run serve 迁移档案 1，VuePersianDatetimePicker.vue：①模型=> modelValue②发射...
