uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件

uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件

日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中,以方便用户输入和选择特定的日期和时间范围。以下是这些组件的主要作用:

日历期间组件

日历期间组件允许用户从日历中选择一个或多个日期范围。这种组件在需要用户指定时间段的应用中非常有用,如会议安排、任务管理、假期申请等。其主要作用包括:

  • 日期选择:提供直观的日历界面,让用户可以方便地选择起始日期和结束日期。
  • 时间范围限制:可以设定可选择的日期范围,例如只能选择未来一周内的日期。
  • 事件关联:在某些应用中,日历期间组件可以与事件管理功能相结合,让用户能够创建、编辑和删除与日期范围相关联的事件。

年期间组件

年期间组件通常用于需要用户指定整年或多年范围的情况。这种组件在财务报告、历史数据分析、年度计划等场景中尤为重要。其主要作用包括:

  • 年份选择:允许用户选择特定的年份或年份范围。
  • 数据聚合:在财务或数据分析应用中,年期间组件可以帮助用户快速聚合和查看特定年份或多年份的数据。
  • 计划制定:在制定年度计划或进行长期规划时,年期间组件可以提供必要的时间框架。

月期间组件

月期间组件允许用户选择特定的月份或月份范围。这种组件在需要关注月度数据或计划的应用中非常有用,如月度预算、销售报告等。其主要作用包括:

  • 月份选择:提供直观的月份选择界面,让用户可以方便地选择起始月份和结束月份。
  • 数据对比:在需要对比不同月份数据的应用中,月期间组件可以帮助用户快速筛选出所需的数据范围。
  • 计划执行:在制定月度计划或跟踪月度任务进度时,月期间组件可以提供清晰的时间线。

时分期间组件

时分期间组件专注于时间的选择,通常包括小时和分钟(有时也包括秒)。这种组件在需要精确到具体时间点的应用中非常重要,如会议安排、课程时间表等。其主要作用包括:

  • 时间选择:允许用户选择特定的时间点或时间段。
  • 时间间隔设置:在某些应用中,可以设定时间间隔(如每半小时一个选项),以便用户快速选择常见的时间点。
  • 日程安排:在安排会议、约会或课程时间表时,时分期间组件可以确保时间的精确性和准确性。

综上所述,日历期间、年期间、月期间及时分期间组件在各自的应用场景中发挥着关键的作用,为用户提供了方便、直观且高效的时间选择和管理工具。

u-picker组件扩展支持上面类型区间组件

<!-- 选择器 -->
<template><u-popup:maskCloseAble="maskCloseAble"mode="bottom":popup="false"v-model="popupValue"length="auto":safeAreaInsetBottom="safeAreaInsetBottom"@close="close":z-index="uZIndex":blur="blur"><view class="u-datetime-picker"><view class="u-picker-header" @touchmove.stop.prevent=""><viewclass="u-btn-picker u-btn-picker--tips":style="{ color: cancelColor }"hover-class="u-opacity":hover-stay-time="150"@click="getResult('cancel')">{{ cancelText }}</view><view class="u-picker__title">{{ title }}</view><viewclass="u-btn-picker u-btn-picker--primary":style="{ color: moving ? cancelColor : confirmColor }"hover-class="u-opacity":hover-stay-time="150"@touchmove.stop=""@click.stop="getResult('confirm')">{{ confirmText }}</view></view><view class="u-picker-body"><picker-viewv-if="mode == 'region'":value="valueArr"@change="change"class="u-picker-view"@pickstart="pickstart"@pickend="pickend"><picker-view-column v-if="!reset && params.province"><view class="u-column-item" v-for="(item, index) in provinces" :key="index"><view class="u-line-1">{{ item.name }}</view></view></picker-view-column><picker-view-column v-if="!reset && params.city"><view class="u-column-item" v-for="(item, index) in citys" :key="index"><view class="u-line-1">{{ item.name }}</view></view></picker-view-column><picker-view-column v-if="!reset && params.area"><view class="u-column-item" v-for="(item, index) in areas" :key="index"><view class="u-line-1">{{ item.name }}</view></view></picker-view-column></picker-view><picker-viewv-else-if="mode == 'time'":value="valueArr"@change="change"class="u-picker-view"@pickstart="pickstart"@pickend="pickend"><picker-view-column v-if="!reset && params.year"><view class="u-column-item" v-for="(item, index) in years" :key="index">{{ item }}<text class="u-text" v-if="showTimeTag">年</text></view></picker-view-column><picker-view-column v-if="!reset && params.month"><view class="u-column-item" v-for="(item, index) in months" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">月</text></view></picker-view-column><picker-view-column v-if="!reset && params.day"><view class="u-column-item" v-for="(item, index) in days" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">日</text></view></picker-view-column><picker-view-column v-if="!reset && params.hour"><view class="u-column-item" v-for="(item, index) in hours" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">时</text></view></picker-view-column><picker-view-column v-if="!reset && params.minute"><view class="u-column-item" v-for="(item, index) in minutes" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">分</text></view></picker-view-column><picker-view-column v-if="!reset && params.second"><view class="u-column-item" v-for="(item, index) in seconds" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">秒</text></view></picker-view-column></picker-view><picker-viewv-else-if="mode.endsWith('Range')":value="valueArr"@change="change"class="u-picker-view"@pickstart="pickstart"@pickend="pickend"><picker-view-column v-if="!reset && params.year"><view class="u-column-item" v-for="(item, index) in years" :key="index">{{ item }}<text class="u-text" v-if="showTimeTag">年</text></view></picker-view-column><picker-view-column v-if="!reset && params.month"><view class="u-column-item" v-for="(item, index) in months" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">月</text></view></picker-view-column><picker-view-column v-if="!reset && params.day"><view class="u-column-item" v-for="(item, index) in days" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">日</text></view></picker-view-column><picker-view-column v-if="!reset && params.hour"><view class="u-column-item" v-for="(item, index) in hours" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">时</text></view></picker-view-column><picker-view-column v-if="!reset && params.minute"><view class="u-column-item" v-for="(item, index) in minutes" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">分</text></view></picker-view-column><picker-view-column v-if="!reset && params.second"><view class="u-column-item" v-for="(item, index) in seconds" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">秒</text></view></picker-view-column><picker-view-column v-if="!reset && params.year"><view class="u-column-item" v-for="(item, index) in years" :key="index">{{ item }}<text class="u-text" v-if="showTimeTag">年</text></view></picker-view-column><picker-view-column v-if="!reset && params.month"><view class="u-column-item" v-for="(item, index) in months" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">月</text></view></picker-view-column><picker-view-column v-if="!reset && params.day"><view class="u-column-item" v-for="(item, index) in days" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">日</text></view></picker-view-column><picker-view-column v-if="!reset && params.hour"><view class="u-column-item" v-for="(item, index) in hours" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">时</text></view></picker-view-column><picker-view-column v-if="!reset && params.minute"><view class="u-column-item" v-for="(item, index) in minutes" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">分</text></view></picker-view-column><picker-view-column v-if="!reset && params.second"><view class="u-column-item" v-for="(item, index) in seconds" :key="index">{{ formatNumber(item) }}<text class="u-text" v-if="showTimeTag">秒</text></view></picker-view-column></picker-view><picker-viewv-else-if="mode == 'selector'":value="valueArr"@change="change"class="u-picker-view"@pickstart="pickstart"@pickend="pickend"><picker-view-column v-if="!reset"><view class="u-column-item" v-for="(item, index) in range" :key="index"><view class="u-line-1">{{ getItemValue(item, "selector") }}</view></view></picker-view-column></picker-view><picker-viewv-else-if="mode == 'multiSelector'":value="valueArr"@change="change"class="u-picker-view"@pickstart="pickstart"@pickend="pickend"><picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index"><view class="u-column-item" v-for="(item1, index1) in item" :key="index1"><view class="u-line-1">{{ getItemValue(item1, "multiSelector") }}</view></view></picker-view-column></picker-view></view></view></u-popup>
</template><script>
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 可选的开始年份,mode=time时有效(默认1950)* @property {String Number} end-year 可选的结束年份,mode=time时有效(默认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 默认选中的时间,mode=time时有效* @property {String} confirm-text 确认按钮的文字* @property {String} cancel-text 取消按钮的文字* @property {String} default-region 默认选中的地区,中文形式,mode=region时有效* @property {String} default-code 默认选中的地区,编号形式,mode=region时有效* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)* @property {String Number} z-index 弹出时的z-index值(默认1075)* @property {Array} default-selector 数组形式,其中每一项表示选择了range对应项中的第几个* @property {Array} range 自定义选择的数据,mode=selector或mode=multiSelector时有效* @property {String} range-key 当range参数的元素为对象时,指定Object中的哪个key的值作为选择器显示内容* @event {Function} confirm 点击确定按钮,返回当前选择的值* @event {Function} cancel 点击取消按钮,返回当前选择的值* @example <u-picker v-model="show" mode="time"></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};}},// 当mode=selector或者mode=multiSelector时,提供的数组range: {type: Array,default() {return [];}},// 当mode=selector或者mode=multiSelector时,提供的默认选中的下标defaultSelector: {type: Array,default() {return [0];}},// 当 range 是一个 Array<Object> 时,通过 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监听月份的变化,实时变更日的天数,因为不同月份,天数不一样// 一个月可能有30,31天,甚至闰年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等传递字符串值时,下面的end+1会导致字符串拼接,而不是相加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)-1=0,导致条件不成立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[prefix+'year'] = time.getFullYear();this[prefix+'month'] = Number(time.getMonth()) + 1;this[prefix+'day'] = time.getDate();this[prefix+'hour'] = time.getHours();this[prefix+'minute'] = time.getMinutes();this[prefix+'second'] = 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.mode=='yearRange'){this.year = this.intValue(values[0])this.pendyear = this.intValue(values[1])}else if(this.mode=='monthRange'){this.month = this.intValue(values[0])this.pendmonth = this.intValue(values[1])}else if(this.mode=='hourRange'){this.hour = this.intValue(values[0])this.pendhour = this.intValue(values[1])}else if(this.mode=='yearMonthRange'){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.mode=='hourMinuteRange'){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[prefix+'year']));},setMonths(prefix='') {this.months = this.generateArray(1, 12);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this[prefix+'month']));},setDays(prefix='') {let totalDays = new Date(this[prefix+'year'],this[prefix+'month'], 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[prefix+'day'] > this.days.length) this[prefix+'day'] = this.days.length;this.valueArr.splice(index, 1, this.getIndex(this.days, this[prefix+'day']));},setHours(prefix='') {this.hours = this.generateArray(0, 23);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this[prefix+'hour']));},setMinutes(prefix='') {this.minutes = this.generateArray(0, 59);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this[prefix+'minute']));},setSeconds(prefix='') {this.seconds = this.generateArray(0, 59);this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this[prefix+'second']));},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.mode=='yearMonthRange'){let startYear = start.year;let endYear = end.year;let startMonth = start.month;let endMonth = end.month;if((startYear>endYear)||(startYear<=endYear&&startMonth>endMonth)){uni.$u.toast('开始年月不能大于年月')return;}rangeValue = startYear+"-"+startMonth+" - "+ endYear+"-"+endMonth}else if(this.mode=='hourMinuteRange'){let startHour = start.hour;let startMinute  = start.minute;let endHour = end.hour;let endMinute  = end.minute;if((startHour>endHour)||(startHour<=endHour&&startMinute>endMinute)){uni.$u.toast('开始时间不能大于结束时间')return;}rangeValue = startHour+":"+startMinute+" - "+ endHour+":"+endMinute}else if(this.mode=='hourRange'){let startHour = start.hour;let endHour = end.hour;if(startHour>endHour){uni.$u.toast('开始时间不能大于结束时间')return;}rangeValue  = startHour+" - "+endHour}else if(this.mode=='yearRange'){let startYear = start.year;let endYear = end.year;if(startYear>endYear){uni.$u.toast('开始年不能大于结束年')return;}rangeValue  = startYear+" - "+ endYear}else if(this.mode=='monthRange'){let startMonth = start.month;let endMonth = end.month;if(startMonth>endMonth){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;}}
};
</script><style lang="scss" 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>

组件调用

<template><view class="container container329152"><u-form-item class="diygw-col-24" label="时间" prop="udate"><u-input @click="showUdate = true" class="" placeholder="请选择" v-model="udate" type="select"></u-input><u-picker :defaultTime="udate" v-model="showUdate" mode="yearRange" :params="paramsUdate" @confirm="changeUdate"></u-picker></u-form-item><u-form-item class="diygw-col-24" label="时间" prop="udate4"><u-input @click="showUdate4 = true" class="" placeholder="请选择" v-model="udate4" type="select"></u-input><u-picker :defaultTime="udate4" v-model="showUdate4" mode="yearMonthRange" :params="paramsUdate4" @confirm="changeUdate4"></u-picker></u-form-item><u-form-item class="diygw-col-24" label="时间" prop="udate3"><u-input @click="showUdate3 = true" class="" placeholder="请选择" v-model="udate3" type="select"></u-input><u-picker :defaultTime="udate3" v-model="showUdate3" mode="hourRange" :params="paramsUdate3" @confirm="changeUdate3"></u-picker></u-form-item><u-form-item class="diygw-col-24" label="时间" prop="udate2"><u-input @click="showUdate2 = true" class="" placeholder="请选择" v-model="udate2" type="select"></u-input><u-picker :defaultTime="udate2" v-model="showUdate2" mode="hourMinuteRange" :params="paramsUdate2" @confirm="changeUdate2"></u-picker></u-form-item><view class="clearfix"></view></view>
</template><script>export 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;}}};
</script><style lang="scss" scoped>.container329152 {}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/429155.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++:日期类的实现

目录 一、前言 二、头文件 三、各个函数的实现 打印、检查日期及获取日期 、、-、-、 、<、<、>、>、 &#xff01; 日期-日期 >>、<< 一、前言 前面几篇讲了关于类和对象的一些知识&#xff0c;本篇就来实现一下前面用到的日期类。 二、头文…

TryHackMe 第3天 | Pre Security (中)

该学习路径讲解了网络安全入门的必备技术知识&#xff0c;比如计算机网络、网络协议、Linux命令、Windows设置等内容。上一篇中简短介绍了计算机网络相关的知识&#xff0c;本篇博客将记录 网络协议 部分。 How the web works? DNS in detail DNS (Domain name system&…

Java面试篇-AOP专题(什么是AOP、AOP的几个核心概念、AOP的常用场景、使用AOP记录操作日志、Spring中的事务是如何实现的)

文章目录 1. 什么是AOP2. AOP的几个核心概念3. AOP的常用场景4. 使用AOP记录操作日志4.1 准备工作4.1.1 引入Maven依赖4.1.2 UserController.java4.1.3 User.java4.1.4 UserService.java 4.2 具体实现&#xff08;以根据id查询用户信息为例&#xff09;4.2.1 定义切面类&#x…

SkyWalking 环境搭建部署

架构简介 skywalking agent : 和业务系统绑定在一起,负责收集各种监控数据skywalking oapservice : 是负责处理监控数据的,比如接受skywalking agent的监控数据,并存储在数据库中;接受skywalking webapp的前端请求,从数据库查询数据,并返回数据给前端。Skywalking oapserv…

华为HarmonyOS地图服务 7- 在地图上绘制标记

场景介绍 本章节将向您介绍如何在地图的指定位置添加标记以标识位置、商家、建筑等。 点标记用来在地图上标记任何位置,例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。Map Kit提供的点标记功能(又称 Marker)封装了大量的触发事件,例如点击事件、长按事件、…

【RabbitMQ】消息分发、事务

消息分发 概念 RabbitMQ队列拥有多个消费者时&#xff0c;队列会把收到的消息分派给不同的消费者。每条消息只会发送给订阅该队列订阅列表里的一个消费者。这种方式非常适合扩展&#xff0c;如果现在负载加重&#xff0c;那么只需要创建更多的消费者来消费处理消息即可。 默…

linux网络编程5

24.9.21学习目录 一.TCP1.TCP流程2.TCP相关函数3.三次握手 一.TCP 1.TCP流程 服务器流程&#xff1a; 创建套接字socket&#xff08;&#xff09;将套接字与服务器网络信息结构体绑定bind&#xff08;&#xff09;将套接字设置为监听状态listen&#xff08;&#xff09;阻塞等…

进程间的通信4 共享内存

共享内存 1.共享内存简介 共享内存是将分配的物理空间直接映射到进程的用户虚拟地址空间中&#xff0c;减少数据在内核空间缓存共享内存是一种效率较高的进程间通讯的方式在 Linux 系统中通过 ipcs -m 查看所有的共享内存 共享内存模型图 2.共享内存的创建 1.函数头文件 #…

Java算法专栏

专栏导读 在当今这个技术日新月异的时代&#xff0c;Java算法作为软件开发的核心&#xff0c;对于提升程序性能和解决复杂问题至关重要。本“Java算法”专栏旨在帮助读者深入理解Java编程语言中的算法原理和应用&#xff0c;通过实战案例和深入分析&#xff0c;使读者能够掌握…

Java汽车销售管理

技术架构&#xff1a; springboot mybatis Mysql5.7 vue2 npm node 功能描述&#xff1a; 针对汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、财务报表等功能&#xff0c;提供经理和销售两种角色进行管理 效果图&#xff1a;

Python基础学习(3)

目录 一&#xff0c;函数 1&#xff0c;函数的定义 2&#xff0c;函数的参数 1&#xff0c;默认值 2&#xff0c;传参 3&#xff0c;返回值 4&#xff0c;变量的作用域 5&#xff0c;函数的调用 二&#xff0c;常用数据结构 1&#xff0c;列表 列表的定义 列表的特性…

【Geoserver使用】REST API调用(工作空间部分)

文章目录 前言一、Geoserver REST API(GeoServer Workspace)二、GeoServer Workspace接口使用1.GET请求 /workspaces2.POST请求 /workspaces3.GET请求 /workspaces/{workspaceName}4.PUT /workspaces/{workspaceName}5.DELETE /workspaces/{workspaceName} 总结 前言 根据Geos…

C++ | Leetcode C++题解之第423题从英文中重建数字

题目&#xff1a; 题解&#xff1a; class Solution { public:string originalDigits(string s) {unordered_map<char, int> c;for (char ch: s) {c[ch];}vector<int> cnt(10);cnt[0] c[z];cnt[2] c[w];cnt[4] c[u];cnt[6] c[x];cnt[8] c[g];cnt[3] c[h] - …

YOLOv10 简介

YOLOv10&#xff0c;由清华大学的研究人员基于 Ultralytics Python 包构建&#xff0c;引入了一种全新的实时目标检测方法&#xff0c;该方法解决了以往 YOLO 版本中后处理和模型架构方面的不足。通过消除非极大值抑制&#xff08;NMS&#xff09;并优化各种模型组件&#xff0…

【解决】chrome 谷歌浏览器,鼠标点击任何区域都是 Input 输入框的状态,能看到输入的光标

chrome 谷歌浏览器&#xff0c;鼠标点击任何区域都是 Input 输入框的状态&#xff0c;能看到输入的光标 今天打开电脑的时候&#xff0c;网页中任何文本的地方&#xff0c;只要鼠标点击&#xff0c;就会出现一个输入的光标&#xff0c;无论在哪个站点哪个页面都是如此。 我知道…

十四、运算放大电路

运算放大电路 1、理想运算放大器的概念。运放的输入端虚拟短路、虚拟断路之间的区别; 2、反相输入方式的运放电路的主要用途&#xff0c;以及输入电压与输出电压信号的相位 3、同相输入方式下的增益表达式(输入阻抗、输出阻抗)

Redis-01 入门和十大数据类型

Redis支持两种持久化方式&#xff1a;RDB持久化和AOF持久化。 1.RDB持久化是将Redis的数据以快照的形式保存在磁盘上&#xff0c;可以手动触发或通过配置文件设置定时触发。RDB保存的是Redis在某个时间点上的数据快照&#xff0c;可以通过恢复RDB文件来恢复数据。 2.AOF持久化…

55. QTableWidget的基本使用

1. 说明 在软件界面开发中,基本上离不开数据的展示以供客户查看一些比较关注的信息,比如公司做一个员工个人信息管理系统,需要一个界面能够展示员工个人基本信息,实现这种效果可以采用多种形式,其中比较简单的一种是使用QT提供的QTableWidget控件,这个控件已经封装了一些…

LeetCode 面试经典150题 190.颠倒二进制位

复习知识&#xff1a;正数的原码、反码、补码相同&#xff0c;负数的反码在其原码的基础上, 符号位不变&#xff0c;其余各个位取反&#xff0c;负数的补码是在其原码的基础上, 符号位不变, 其余各位取反, 最后1 (即在反码的基础上1)。 题目&#xff1a;颠倒给定的 32 位无符号…

Springboot3 + MyBatis-Plus + MySql + Uniapp 商品加入购物车功能实现(最新教程附源码)

Springboot3 MyBatis-Plus MySql Uniapp 商品加入购物车功能实现&#xff08;针对上一篇sku&#xff09; 1、效果展示2、后端代码2.1 model2.2 mapper server serverImpl 参照上一篇自动生成2.3 controller 3、前端代码3.1 index.js3.2 shop-info.vue3.3 ShopBottomButton.v…