wordpress米表插件,搜索引擎优化什么意思,王也气质头像,太仓网站建设企业网站uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件 日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中#xff0c;以方便用户输入和选择特定的日期和时间范围。以下是这些组件的主要作用以方便用户输入和选择特定的日期和时间范围。以下是这些组件的主要作用
日历期间组件
日历期间组件允许用户从日历中选择一个或多个日期范围。这种组件在需要用户指定时间段的应用中非常有用如会议安排、任务管理、假期申请等。其主要作用包括
日期选择提供直观的日历界面让用户可以方便地选择起始日期和结束日期。时间范围限制可以设定可选择的日期范围例如只能选择未来一周内的日期。事件关联在某些应用中日历期间组件可以与事件管理功能相结合让用户能够创建、编辑和删除与日期范围相关联的事件。 年期间组件
年期间组件通常用于需要用户指定整年或多年范围的情况。这种组件在财务报告、历史数据分析、年度计划等场景中尤为重要。其主要作用包括
年份选择允许用户选择特定的年份或年份范围。数据聚合在财务或数据分析应用中年期间组件可以帮助用户快速聚合和查看特定年份或多年份的数据。计划制定在制定年度计划或进行长期规划时年期间组件可以提供必要的时间框架。 月期间组件
月期间组件允许用户选择特定的月份或月份范围。这种组件在需要关注月度数据或计划的应用中非常有用如月度预算、销售报告等。其主要作用包括
月份选择提供直观的月份选择界面让用户可以方便地选择起始月份和结束月份。数据对比在需要对比不同月份数据的应用中月期间组件可以帮助用户快速筛选出所需的数据范围。计划执行在制定月度计划或跟踪月度任务进度时月期间组件可以提供清晰的时间线。 时分期间组件
时分期间组件专注于时间的选择通常包括小时和分钟有时也包括秒。这种组件在需要精确到具体时间点的应用中非常重要如会议安排、课程时间表等。其主要作用包括
时间选择允许用户选择特定的时间点或时间段。时间间隔设置在某些应用中可以设定时间间隔如每半小时一个选项以便用户快速选择常见的时间点。日程安排在安排会议、约会或课程时间表时时分期间组件可以确保时间的精确性和准确性。
综上所述日历期间、年期间、月期间及时分期间组件在各自的应用场景中发挥着关键的作用为用户提供了方便、直观且高效的时间选择和管理工具。
u-picker组件扩展支持上面类型区间组件
!-- 选择器 --
templateu-popup:maskCloseAblemaskCloseAblemodebottom:popupfalsev-modelpopupValuelengthauto:safeAreaInsetBottomsafeAreaInsetBottomcloseclose:z-indexuZIndex:blurblurview classu-datetime-pickerview classu-picker-header touchmove.stop.preventviewclassu-btn-picker u-btn-picker--tips:style{ color: cancelColor }hover-classu-opacity:hover-stay-time150clickgetResult(cancel){{ cancelText }}/viewview classu-picker__title{{ title }}/viewviewclassu-btn-picker u-btn-picker--primary:style{ color: moving ? cancelColor : confirmColor }hover-classu-opacity:hover-stay-time150touchmove.stopclick.stopgetResult(confirm){{ confirmText }}/view/viewview classu-picker-bodypicker-viewv-ifmode region:valuevalueArrchangechangeclassu-picker-viewpickstartpickstartpickendpickendpicker-view-column v-if!reset params.provinceview classu-column-item v-for(item, index) in provinces :keyindexview classu-line-1{{ item.name }}/view/view/picker-view-columnpicker-view-column v-if!reset params.cityview classu-column-item v-for(item, index) in citys :keyindexview classu-line-1{{ item.name }}/view/view/picker-view-columnpicker-view-column v-if!reset params.areaview classu-column-item v-for(item, index) in areas :keyindexview classu-line-1{{ item.name }}/view/view/picker-view-column/picker-viewpicker-viewv-else-ifmode time:valuevalueArrchangechangeclassu-picker-viewpickstartpickstartpickendpickendpicker-view-column v-if!reset params.yearview classu-column-item v-for(item, index) in years :keyindex{{ item }}text classu-text v-ifshowTimeTag年/text/view/picker-view-columnpicker-view-column v-if!reset params.monthview classu-column-item v-for(item, index) in months :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag月/text/view/picker-view-columnpicker-view-column v-if!reset params.dayview classu-column-item v-for(item, index) in days :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag日/text/view/picker-view-columnpicker-view-column v-if!reset params.hourview classu-column-item v-for(item, index) in hours :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag时/text/view/picker-view-columnpicker-view-column v-if!reset params.minuteview classu-column-item v-for(item, index) in minutes :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag分/text/view/picker-view-columnpicker-view-column v-if!reset params.secondview classu-column-item v-for(item, index) in seconds :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag秒/text/view/picker-view-column/picker-viewpicker-viewv-else-ifmode.endsWith(Range):valuevalueArrchangechangeclassu-picker-viewpickstartpickstartpickendpickendpicker-view-column v-if!reset params.yearview classu-column-item v-for(item, index) in years :keyindex{{ item }}text classu-text v-ifshowTimeTag年/text/view/picker-view-columnpicker-view-column v-if!reset params.monthview classu-column-item v-for(item, index) in months :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag月/text/view/picker-view-columnpicker-view-column v-if!reset params.dayview classu-column-item v-for(item, index) in days :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag日/text/view/picker-view-columnpicker-view-column v-if!reset params.hourview classu-column-item v-for(item, index) in hours :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag时/text/view/picker-view-columnpicker-view-column v-if!reset params.minuteview classu-column-item v-for(item, index) in minutes :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag分/text/view/picker-view-columnpicker-view-column v-if!reset params.secondview classu-column-item v-for(item, index) in seconds :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag秒/text/view/picker-view-columnpicker-view-column v-if!reset params.yearview classu-column-item v-for(item, index) in years :keyindex{{ item }}text classu-text v-ifshowTimeTag年/text/view/picker-view-columnpicker-view-column v-if!reset params.monthview classu-column-item v-for(item, index) in months :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag月/text/view/picker-view-columnpicker-view-column v-if!reset params.dayview classu-column-item v-for(item, index) in days :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag日/text/view/picker-view-columnpicker-view-column v-if!reset params.hourview classu-column-item v-for(item, index) in hours :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag时/text/view/picker-view-columnpicker-view-column v-if!reset params.minuteview classu-column-item v-for(item, index) in minutes :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag分/text/view/picker-view-columnpicker-view-column v-if!reset params.secondview classu-column-item v-for(item, index) in seconds :keyindex{{ formatNumber(item) }}text classu-text v-ifshowTimeTag秒/text/view/picker-view-column/picker-viewpicker-viewv-else-ifmode selector:valuevalueArrchangechangeclassu-picker-viewpickstartpickstartpickendpickendpicker-view-column v-if!resetview classu-column-item v-for(item, index) in range :keyindexview classu-line-1{{ getItemValue(item, selector) }}/view/view/picker-view-column/picker-viewpicker-viewv-else-ifmode multiSelector:valuevalueArrchangechangeclassu-picker-viewpickstartpickstartpickendpickendpicker-view-column v-if!reset v-for(item, index) in range :keyindexview classu-column-item v-for(item1, index1) in item :keyindex1view classu-line-1{{ getItemValue(item1, multiSelector) }}/view/view/picker-view-column/picker-view/view/view/u-popup
/templatescript
import provinces from ../../libs/address/provinces.json;
import citys from ../../libs/address/citys.json;
import areas from ../../libs/address/areas.json;
/*** picker picker弹出选择器* description 此选择器有两种弹出模式一是时间模式可以配置年日月时分秒参数 二是地区模式可以配置省市区参数* tutorial https://www.uviewui.com/components/picker.html* property {Object} params 需要显示的参数见官网说明* property {String} mode 模式选择region-地区类型time-时间类型默认time* property {String Number} start-year 可选的开始年份modetime时有效默认1950* property {String Number} end-year 可选的结束年份modetime时有效默认2050* property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配默认false* property {Boolean} show-time-tag 时间模式时是否显示后面的年月日中文提示* property {String} cancel-color 取消按钮的颜色默认#606266* property {String} confirm-color 确认按钮的颜色默认#19be6b* property {String} default-time 默认选中的时间modetime时有效* property {String} confirm-text 确认按钮的文字* property {String} cancel-text 取消按钮的文字* property {String} default-region 默认选中的地区中文形式moderegion时有效* property {String} default-code 默认选中的地区编号形式moderegion时有效* property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker默认true* property {String Number} z-index 弹出时的z-index值默认1075* property {Array} default-selector 数组形式其中每一项表示选择了range对应项中的第几个* property {Array} range 自定义选择的数据modeselector或modemultiSelector时有效* property {String} range-key 当range参数的元素为对象时指定Object中的哪个key的值作为选择器显示内容* event {Function} confirm 点击确定按钮返回当前选择的值* event {Function} cancel 点击取消按钮返回当前选择的值* example u-picker v-modelshow modetime/u-picker*/
export default {name: u-picker,emits: [update:modelValue, input, confirm, cancel],props: {// 通过双向绑定控制组件的弹出与收起value: {type: Boolean,default: false},modelValue: {type: Boolean,default: false},// picker中需要显示的参数params: {type: Object,default() {return {year: true,month: true,day: true,hour: false,minute: false,second: false,province: true,city: true,area: true,timestamp: true};}},// 当modeselector或者modemultiSelector时提供的数组range: {type: Array,default() {return [];}},// 当modeselector或者modemultiSelector时提供的默认选中的下标defaultSelector: {type: Array,default() {return [0];}},// 当 range 是一个 ArrayObject 时通过 range-key 来指定 Object 中 key 的值作为选择器显示内容rangeKey: {type: String,default: },// 模式选择region-地区类型time-时间类型selector-单列模式multiSelector-多列模式mode: {type: String,default: time},// 年份开始时间startYear: {type: [String, Number],default: 1950},// 年份结束时间endYear: {type: [String, Number],default: 2050},// 取消按钮的颜色cancelColor: {type: String,default: #606266},// 确定按钮的颜色confirmColor: {type: String,default: #19be6b},// 默认显示的时间2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02defaultTime: {type: String,default: },// 默认显示的地区可传类似[河北省, 秦皇岛市, 北戴河区]defaultRegion: {type: Array,default() {return [];}},// 时间模式时是否显示后面的年月日中文提示showTimeTag: {type: Boolean,default: true},// 地区编辑字符串areaCodes: {type: String,default: },// 默认显示地区的编码defaultRegion和areaCode同时存在areaCode优先可传类似[13, 1303, 130304]areaCode: {type: Array,default() {return [];}},safeAreaInsetBottom: {type: Boolean,default: false},// 是否允许通过点击遮罩关闭PickermaskCloseAble: {type: Boolean,default: true},// 弹出的z-index值zIndex: {type: [String, Number],default: 0},// 顶部标题title: {type: String,default: },// 取消按钮的文字cancelText: {type: String,default: 取消},// 确认按钮的文字confirmText: {type: String,default: 确认},// 遮罩的模糊度blur: {type: [String, Number],default: 0}},data() {return {popupValue: false,years: [],months: [],days: [],hours: [],minutes: [],seconds: [],year: 0,month: 0,day: 0,hour: 0,minute: 0,second: 0,//结束年月日pendyear: 0,pendmonth: 0,pendday: 0,pendhour: 0,pendminute: 0,pendsecond: 0,reset: false,startDate: ,endDate: ,rangeValue:,valueArr: [],searchAreaCode:[],provinces: provinces,citys: citys[0],areas: areas[0][0],province: 0,city: 0,area: 0,moving: false // 列是否还在滑动中微信小程序如果在滑动中就点确定结果可能不准确};},mounted() {this.init();},computed: {valueCom() {// #ifndef VUE3return this.value;// #endif// #ifdef VUE3return this.modelValue;// #endif},propsChange() {// 引用这几个变量是为了监听其变化return ${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}-${this.areaCodes};},regionChange() {// 引用这几个变量是为了监听其变化return ${this.province}-${this.city};},yearAndMonth() {return ${this.year}-${this.month};},uZIndex() {// 如果用户有传递z-index值优先使用return this.zIndex ? this.zIndex : this.$u.zIndex.popup;}},watch: {propsChange() {this.reset true;setTimeout(() this.init(), 10);},// 如果地区发生变化为了让picker联动起来必须重置this.citys和this.areasregionChange(val) {this.citys citys[this.province];this.areas areas[this.province][this.city];},// watch监听月份的变化实时变更日的天数因为不同月份天数不一样// 一个月可能有3031天甚至闰年2月的29天平年2月28天yearAndMonth(val) {if (this.params.year) this.setDays();},// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)需要重新初始化才能显示正确的值valueCom:{immediate: true,handler(n){if (n) {this.reset true;setTimeout(() {this.init()this.popupValue n;} , 10);}else{this.popupValue n;}}}},methods: {// 标识滑动开始只有微信小程序才有这样的事件pickstart() {// #ifdef MP-WEIXINthis.moving true;// #endif},// 标识滑动结束pickend() {// #ifdef MP-WEIXINthis.moving false;// #endif},// 对单列和多列形式的判断是否有传入变量的情况getItemValue(item, mode) {// 目前(2020-05-25)uni-app对微信小程序编译有错误导致v-if为false中的内容也执行错误导致// 单列模式或者多列模式中的getItemValue同时被执行故在这里再加一层判断if (this.mode mode) {return typeof item object ? item[this.rangeKey] : item;}},// 小于10前面补0用于月份日期时分秒等formatNumber(num) {return num 10 ? 0 num : String(num);},// 生成递进的数组generateArray: function(start, end) {// 转为数值格式否则用户给end-year等传递字符串值时下面的end1会导致字符串拼接而不是相加start Number(start);end Number(end);end end start ? end : start;// 生成数组获取其中的索引并剪出来return [...Array(end 1).keys()].slice(start);},getIndex: function(arr, val) {let index arr.indexOf(val);// 如果index为-1(即找不到index值)~(-1)-(-1)-10导致条件不成立return ~index ? index : 0;},//日期时间处理initTimeValue(prefix) {// 格式化时间在IE浏览器(uni不存在此情况)无法识别日期间的-间隔符号let fdate this.defaultTime.replace(/\-/g, /);fdate fdate fdate.indexOf(/) -1 ? 2020/01/01 ${fdate} : fdate;let time null;if (fdate) time new Date(fdate);else time new Date();// 获取年日月时分秒this[prefixyear] time.getFullYear();this[prefixmonth] Number(time.getMonth()) 1;this[prefixday] time.getDate();this[prefixhour] time.getHours();this[prefixminute] time.getMinutes();this[prefixsecond] time.getSeconds();},intValue(val){return parseInt(val)},initRangeTimeValue() {if(!this.defaultTime){this.initTimeValue()this.initTimeValue(pend)}else{// 格式化时间在IE浏览器(uni不存在此情况)无法识别日期间的-间隔符号let values this.defaultTime.split( - )if(this.modeyearRange){this.year this.intValue(values[0])this.pendyear this.intValue(values[1])}else if(this.modemonthRange){this.month this.intValue(values[0])this.pendmonth this.intValue(values[1])}else if(this.modehourRange){this.hour this.intValue(values[0])this.pendhour this.intValue(values[1])}else if(this.modeyearMonthRange){let start values[0]let pend values[1]let yearMonth start.split(-)this.year this.intValue(yearMonth[0])this.month this.intValue(yearMonth[1])let pendYearMonth pend.split(-)this.pendyear this.intValue(pendYearMonth[0])this.pendmonth this.intValue(pendYearMonth[1])}else if(this.modehourMinuteRange){let start values[0]let pend values[1]let hourMinute start.split(:)this.hour this.intValue(hourMinute[0])this.minute this.intValue(hourMinute[1])let pendHourMinute pend.split(:)this.pendhour this.intValue(pendHourMinute[0])this.pendminute this.intValue(pendHourMinute[1])}}},init() {this.valueArr [];this.reset false;if (this.mode time) {this.initTimeValue();if (this.params.year) {this.valueArr.push(0);this.setYears();}if (this.params.month) {this.valueArr.push(0);this.setMonths();}if (this.params.day) {this.valueArr.push(0);this.setDays();}if (this.params.hour) {this.valueArr.push(0);this.setHours();}if (this.params.minute) {this.valueArr.push(0);this.setMinutes();}if (this.params.second) {this.valueArr.push(0);this.setSeconds();}}else if (this.mode.endsWith(Range)) {this.initRangeTimeValue();if (this.params.year) {this.valueArr.push(0);this.setYears();}if (this.params.month) {this.valueArr.push(0);this.setMonths();}if (this.params.day) {this.valueArr.push(0);this.setDays();}if (this.params.hour) {this.valueArr.push(0);this.setHours();}if (this.params.minute) {this.valueArr.push(0);this.setMinutes();}if (this.params.second) {this.valueArr.push(0);this.setSeconds();}if (this.params.year) {this.valueArr.push(0);this.setYears(pend);}if (this.params.month) {this.valueArr.push(0);this.setMonths(pend);}if (this.params.day) {this.valueArr.push(0);this.setDays(pend);}if (this.params.hour) {this.valueArr.push(0);this.setHours(pend);}if (this.params.minute) {this.valueArr.push(0);this.setMinutes(pend);}if (this.params.second) {this.valueArr.push(0);this.setSeconds(pend);}} else if (this.mode region) {if(this.areaCodes){this.searchAreaCode this.areaCodes.split(-)}else{this.searchAreaCode this.areaCode}if (this.params.province) {this.valueArr.push(0);this.setProvinces();}if (this.params.city) {this.valueArr.push(0);this.setCitys();}if (this.params.area) {this.valueArr.push(0);this.setAreas();}} else if (this.mode selector) {this.valueArr this.defaultSelector;} else if (this.mode multiSelector) {this.valueArr this.defaultSelector;this.multiSelectorValue this.defaultSelector;}this.$forceUpdate();},// 设置picker的某一列值setYears(prefix) {// 获取年份集合this.years this.generateArray(this.startYear, this.endYear);// 设置this.valueArr某一项的值是为了让picker预选中某一个值this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this[prefixyear]));},setMonths(prefix) {this.months this.generateArray(1, 12);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this[prefixmonth]));},setDays(prefix) {let totalDays new Date(this[prefixyear],this[prefixmonth], 0).getDate();this.days this.generateArray(1, totalDays);let index 0;// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法// 因为this.month和this.year变化时会触发watch中的this.setDays()导致this.valueArr.length计算有误if (this.params.year this.params.month) index 2;else if (this.params.month) index 1;else if (this.params.year) index 1;else index 0;// 当月份变化时会导致日期的天数也会变化如果原来选的天数大于变化后的天数则重置为变化后的最大值// 比如原来选中3月31日调整为2月后日期变为最大29这时如果day值继续为31显然不合理于是将其置为29(picker-column从1开始)if (this[prefixday] this.days.length) this[prefixday] this.days.length;this.valueArr.splice(index, 1, this.getIndex(this.days, this[prefixday]));},setHours(prefix) {this.hours this.generateArray(0, 23);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this[prefixhour]));},setMinutes(prefix) {this.minutes this.generateArray(0, 59);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this[prefixminute]));},setSeconds(prefix) {this.seconds this.generateArray(0, 59);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this[prefixsecond]));},setProvinces() {// 判断是否需要province参数if (!this.params.province) return;let tmp ;let useCode false;// 如果同时配置了defaultRegion和areaCode优先使用areaCode参数if (this.searchAreaCode.length) {tmp this.searchAreaCode[0];useCode true;} else if (this.defaultRegion.length) tmp this.defaultRegion[0];else tmp 0;// 历遍省份数组匹配provinces.map((v, k) {if (useCode ? v.code tmp : v.name tmp) {tmp k;}});this.province tmp;this.provinces provinces;// 设置默认省份的值this.valueArr.splice(0, 1, this.province);},setCitys() {if (!this.params.city) return;let tmp ;let useCode false;if (this.searchAreaCode.length) {tmp this.searchAreaCode[1];useCode true;} else if (this.defaultRegion.length) tmp this.defaultRegion[1];else tmp 0;citys[this.province].map((v, k) {if (useCode ? v.code tmp : v.name tmp) {tmp k;}});this.city tmp;this.citys citys[this.province];this.valueArr.splice(1, 1, this.city);},setAreas() {if (!this.params.area) return;let tmp ;let useCode false;if (this.searchAreaCode.length) {tmp this.searchAreaCode[2];useCode true;} else if (this.defaultRegion.length) tmp this.defaultRegion[2];else tmp 0;areas[this.province][this.city].map((v, k) {if (useCode ? v.code tmp : v.name tmp) {tmp k;}});this.area tmp;this.areas areas[this.province][this.city];this.valueArr.splice(2, 1, this.area);},close() {this.$emit(input, false);this.$emit(update:modelValue, false);},// 用户更改picker的列选项change(e) {console.log(e.detail.value)this.valueArr e.detail.value;let i 0;if (this.mode time) {// 这里使用i是因为this.valueArr数组的长度是不确定长度的它根据this.params的值来配置长度// 进入if规则i会加1保证了能获取准确的值if (this.params.year) this.year this.years[this.valueArr[i]];if (this.params.month) this.month this.months[this.valueArr[i]];if (this.params.day) this.day this.days[this.valueArr[i]];if (this.params.hour) this.hour this.hours[this.valueArr[i]];if (this.params.minute) this.minute this.minutes[this.valueArr[i]];if (this.params.second) this.second this.seconds[this.valueArr[i]];}else if (this.mode region) {if (this.params.province) this.province this.valueArr[i];if (this.params.city) this.city this.valueArr[i];if (this.params.area) this.area this.valueArr[i];}else if (this.mode.endsWith(Range)) {this.rangeValue this.getRangeValue()}else if (this.mode multiSelector) {let index null;// 对比前后两个数组寻找变更的是哪一列如果某一个元素不同即可判定该列发生了变化this.defaultSelector.map((val, idx) {if (val ! e.detail.value[idx]) index idx;});// 为了让用户对多列变化时对动态设置其他列的变更if (index ! null) {this.$emit(columnchange, {column: index,index: e.detail.value[index]});}}},getTimeValue(i){let result {}if (this.params.year) result.year this.formatNumber(this.years[this.valueArr[i]]|| 0);if (this.params.month) result.month this.formatNumber(this.months[this.valueArr[i]]|| 0);if (this.params.day) result.day this.formatNumber(this.days[this.valueArr[i]]|| 0);if (this.params.hour) result.hour this.formatNumber(this.hours[this.valueArr[i]]|| 0);if (this.params.minute) result.minute this.formatNumber(this.minutes[this.valueArr[i]]|| 0);if (this.params.second) result.second this.formatNumber(this.seconds[this.valueArr[i]]|| 0);return [result,i];},getRangeValue(){let i 0;// 这里使用i是因为this.valueArr数组的长度是不确定长度的它根据this.params的值来配置长度// 进入if规则i会加1保证了能获取准确的值let startValue this.getTimeValue(i);let start startValue[0];let endValue this.getTimeValue(startValue[1]);let end endValue[0];let rangeValue if(this.modeyearMonthRange){let startYear start.year;let endYear end.year;let startMonth start.month;let endMonth end.month;if((startYearendYear)||(startYearendYearstartMonthendMonth)){uni.$u.toast(开始年月不能大于年月)return;}rangeValue startYear-startMonth - endYear-endMonth}else if(this.modehourMinuteRange){let startHour start.hour;let startMinute start.minute;let endHour end.hour;let endMinute end.minute;if((startHourendHour)||(startHourendHourstartMinuteendMinute)){uni.$u.toast(开始时间不能大于结束时间)return;}rangeValue startHour:startMinute - endHour:endMinute}else if(this.modehourRange){let startHour start.hour;let endHour end.hour;if(startHourendHour){uni.$u.toast(开始时间不能大于结束时间)return;}rangeValue startHour - endHour}else if(this.modeyearRange){let startYear start.year;let endYear end.year;if(startYearendYear){uni.$u.toast(开始年不能大于结束年)return;}rangeValue startYear - endYear}else if(this.modemonthRange){let startMonth start.month;let endMonth end.month;if(startMonthendMonth){uni.$u.toast(开始月不能大于结束月)return;}rangeValue startMonth - endMonth}return rangeValue;},// 用户点击确定按钮getResult(event null) {// #ifdef MP-WEIXINif (this.moving) return;// #endiflet result {};// 只返回用户在this.params中配置了为true的字段if (this.mode time) {if (this.params.year) result.year this.formatNumber(this.year || 0);if (this.params.month) result.month this.formatNumber(this.month || 0);if (this.params.day) result.day this.formatNumber(this.day || 0);if (this.params.hour) result.hour this.formatNumber(this.hour || 0);if (this.params.minute) result.minute this.formatNumber(this.minute || 0);if (this.params.second) result.second this.formatNumber(this.second || 0);if (this.params.timestamp) result.timestamp this.getTimestamp();}else if (this.mode.endsWith(Range)) {if(!this.rangeValue){this.rangeValue this.getRangeValue()}result.result this.rangeValue}else if (this.mode region) {if (this.params.province) result.province provinces[this.province];if (this.params.city) result.city citys[this.province][this.city];if (this.params.area) result.area areas[this.province][this.city][this.area];} else if (this.mode selector) {result this.valueArr;} else if (this.mode multiSelector) {result this.valueArr;}if (event) this.$emit(event, result);this.close();},// 获取时间戳getTimestamp() {// yyyy-mm-dd为安卓写法不支持iOS需要使用/分隔才能二者兼容let time this.year / this.month / this.day this.hour : this.minute : this.second;return new Date(time).getTime() / 1000;},// 获得数据源getDateSource() {return {provinces,citys,areas};},// 智能识别省市区regionDiscern(addressText){// 街道地址let address ;// 省let province {};// 市let city {};// 区let area {};if (!addressText) return { code: -1, msg: 地址文本不能为空 };addressText.trim(); // 去除前后空格// 省// 1.先找出省份通过匹配前面两个字(中国34个省份中前面两个字不会重复)let firstTwoKey addressText.substring(0, 2); //字符串开始的两个字符// 所在省的下标let provinceIndex -1;for (let i 0; i provinces.length; i) {let { code, name } provinces[i];if (name.indexOf(firstTwoKey) 0) {province { code, name };provinceIndex i;break;}}if (provinceIndex -1) return { code: -1, msg: 省份【${firstTwoKey}】没有找到请输入正确的地址 };// 获取市let citysArr citys[provinceIndex];// 所在市的下标let cityIndex -1;for (let i 0; i citysArr.length; i) {let { name, code } citysArr[i];// 除去最后一个 市 字let cityName name.substr(0, name.length - 1);// 用城市的名字去匹配 addressText 地址if (addressText.indexOf(cityName) -1) {city { code, name };cityIndex i;break;}}if (cityIndex -1) return { code: -1, msg: 地级市没有找到请输入正确的地址 };// 区let areasArr areas[provinceIndex][cityIndex];// 所在区的下标let areaIndex -1;for (let i 0; i areasArr.length; i) {let { code, name } areasArr[i];// 区名(县名)一般为3个字如江干区有可能会简写成 江干// 区名(县名)为2个字时不会简写如蓉县let reg name;if (name.length 2) reg |${name.substr(0, name.length - 1)};// 查找地址中是否存在该区名let areaRegExp new RegExp(reg);if (addressText.search(areaRegExp) -1) {area { code, name };// 详情地址address addressText.replace(new RegExp(reg), {{~}}).split({{~}})[1];areaIndex i;break;}}if (areaIndex -1) return { code: -1, msg: 县级市没有找到请输入正确的地址 };let formatted_address ${province.name}${city.name}${area.name}${address};let res {code: 0,msg: ok,data: {province, // 省city, // 市area, // 区address, // 街道地址formatted_address, // 完整格式化地址}};return res;},// 智能识别收货信息addressDiscern(text) {// 收货人姓名let name ;// 收货人手机let mobile ;// 街道地址let address ;// 省let province {};// 市let city {};// 区let area {};if (!text) return { code: -1, msg: 地址文本不能为空 };//let newText text.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g, );let textArr text.split(/[^\u4e00-\u9fa5a-zA-Z0-9-()]/g).filter(v v.length);if (textArr.length ! 3) return { code: -1, msg: 地址格式不正确请按姓名 手机号 收货地址格式。 };// 获取姓名和手机号let temp;let addressText; // 地址原文for (let [k, v] of textArr.entries()) {if (/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(v)) {mobile v;continue;}//记录第一次出现的字符串if (!temp) {temp v;continue;}// 当前字符串的长度和之前字符串的长度的对比进而确定姓名和地址信息temp.length v.length? ((addressText temp), (name v)): ((addressText v), (name temp));}let positionRes this.regionDiscern(addressText);if (positionRes.code ! 0) return positionRes;let res {code: 0,msg: ok,data: {name, // 姓名mobile, // 手机号position: positionRes.data, // 省市区街道信息}};return res;}}
};
/scriptstyle langscss scoped
.u-datetime-picker {position: relative;z-index: 999;
}.u-picker-view {height: 100%;box-sizing: border-box;
}.u-picker-header {width: 100%;height: 90rpx;padding: 0 40rpx;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;font-size: 30rpx;background: #fff;position: relative;
}.u-picker-header::after {content: ;position: absolute;border-bottom: 1rpx solid #eaeef1;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);bottom: 0;right: 0;left: 0;
}.u-picker__title {color: $u-content-color;
}.u-picker-body {width: 100%;height: 500rpx;overflow: hidden;background-color: #fff;
}.u-column-item {display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: $u-main-color;padding: 0 8rpx;
}.u-text {font-size: 24rpx;padding-left: 8rpx;
}.u-btn-picker {padding: 16rpx;box-sizing: border-box;text-align: center;text-decoration: none;
}.u-opacity {opacity: 0.5;
}.u-btn-picker--primary {color: $u-type-primary;
}.u-btn-picker--tips {color: $u-tips-color;
}
/style组件调用
templateview classcontainer container329152u-form-item classdiygw-col-24 label时间 propudateu-input clickshowUdate true class placeholder请选择 v-modeludate typeselect/u-inputu-picker :defaultTimeudate v-modelshowUdate modeyearRange :paramsparamsUdate confirmchangeUdate/u-picker/u-form-itemu-form-item classdiygw-col-24 label时间 propudate4u-input clickshowUdate4 true class placeholder请选择 v-modeludate4 typeselect/u-inputu-picker :defaultTimeudate4 v-modelshowUdate4 modeyearMonthRange :paramsparamsUdate4 confirmchangeUdate4/u-picker/u-form-itemu-form-item classdiygw-col-24 label时间 propudate3u-input clickshowUdate3 true class placeholder请选择 v-modeludate3 typeselect/u-inputu-picker :defaultTimeudate3 v-modelshowUdate3 modehourRange :paramsparamsUdate3 confirmchangeUdate3/u-picker/u-form-itemu-form-item classdiygw-col-24 label时间 propudate2u-input clickshowUdate2 true class placeholder请选择 v-modeludate2 typeselect/u-inputu-picker :defaultTimeudate2 v-modelshowUdate2 modehourMinuteRange :paramsparamsUdate2 confirmchangeUdate2/u-picker/u-form-itemview classclearfix/view/view
/templatescriptexport default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},paramsUdate: {year: true,month: false,day: false,hour: false,minute: false,second: false},showUdate: false,udate: ,paramsUdate4: {year: true,month: true,day: false,hour: false,minute: false,second: false},showUdate4: false,udate4: ,paramsUdate3: {year: false,month: false,day: false,hour: true,minute: false,second: false},showUdate3: false,udate3: ,paramsUdate2: {year: false,month: false,day: false,hour: true,minute: true,second: false},showUdate2: false,udate2: };},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {},// 新增方法 自定义方法async testFunction(param) {let thiz this;console.log(this.checkbox);},changeUdate(evt) {this.udate evt.result;},changeUdate4(evt) {this.udate4 evt.result;},changeUdate3(evt) {this.udate3 evt.result;},changeUdate2(evt) {this.udate2 evt.result;}}};
/scriptstyle langscss scoped.container329152 {}
/style
