自定义时间选择器组件

最新推荐文章于 2024-07-25 17:24:15 发布
最新推荐文章于 2024-07-25 17:24:15 发布
阅读量273 收藏
点赞数
文章标签： windows java 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73184582/article/details/131755247
版权 
<template>
  <view class="ccq-week-picker">
    <view class="ccq-week-popup_header">
      <text class="cancel" @click="onCancel">取消</text>
      <text class="title">选择时间</text>
      <text class="sure" @click="onSure">确定</text>
    </view>
    <view class="typeList">
      <view
        class="typeItem"
        v-for="(item, index) in typeList"
        :key="item.value"
        :class="{ on: type === item.value }"
        @click="changeType(index)"
        >{{ item.name }}</view
      >
      <!--      <u-subsection :list="typeList" :current="formatType" @change="changeType"></u-subsection>-->
    </view>
    <view class="valueBox">
      <view v-if="type !== 'custom'">{{ checkval }}</view>
      <view class="valueBox-custom" v-else>
        <view
          class="startTime customTime"
          :class="{ on: editTimeKey === 0, customtext: !formatTime(result[0]) }"
          @click="changeCustom(0)"
        >
          {{ formatTime(result[0]) || " 请选择开始时间 " }}
        </view>
        <view>-</view>
        <view
          class="endTime customTime"
          :class="{ on: editTimeKey === 1, customtext: !formatTime(result[1]) }"
          @click="changeCustom(1)"
        >
          {{ formatTime(result[1]) || " 请选择结束时间 " }}
        </view>
      </view>
    </view>

    <picker-view
      :value="pickerValue"
      @change="bindChange"
      class="ccq-week-picker_view"
      indicatorStyle="height: 80rpx;"
      @pickstart="pickStart"
      @pickend="pickEnd"
    >
      <picker-view-column class="ccq-week-picker_item years">
        <view
          class="ccq-week-picker_item_view"
          :style="{ height: height + 'px' }"
          v-for="(item, index) in years"
          :key="index"
          >{{ item }}年</view
        >
      </picker-view-column>
      <picker-view-column
        class="ccq-week-picker_item months"
        v-if="type !== 'week'"
      >
        <view
          class="ccq-week-picker_item_view"
          :style="{ height: height + 'px' }"
          v-for="(item, index) in months"
          :key="index"
          >{{ index + 1 }}月</view
        >
      </picker-view-column>
      <picker-view-column
        class="ccq-week-picker_item days"
        v-if="(type === 'day' || type === 'custom' || type === 'oldday')&&showDays"
      >
        <view
          class="ccq-week-picker_item_view"
          :style="{ height: height + 'px' }"
          v-for="(item, index) in days"
          :key="index"
          >{{ index + 1 }}日</view
        >
      </picker-view-column>
      <picker-view-column
        class="ccq-week-picker_item weeks"
        v-if="type === 'week'"
      >
        <view
          class="ccq-week-picker_item_view"
          :style="{ height: height + 'px' }"
          v-for="(item, index) in weeks"
          :key="index"
          >{{ index + 1 }}周</view
        >
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";
import isoWeeksInYear from "dayjs/plugin/isoWeeksInYear";
import isoWeek from "dayjs/plugin/isoWeek";
import isLeapYear from "dayjs/plugin/isLeapYear";
dayjs.extend(isLeapYear);
dayjs.extend(isoWeek);
dayjs.extend(weekOfYear);
dayjs.extend(isoWeeksInYear);
const nowDate = new Date();
var yesterTime = new Date().getTime();
var yesterTimeStamp = new Date(yesterTime);
var month = yesterTimeStamp.getMonth(); //昨天的月
var day = yesterTimeStamp.getDate(); //昨天的日
//昨天的日期20220630
var yesterday =
  yesterTimeStamp.getFullYear() +
  "" +
  (yesterTimeStamp.getMonth() > 9
    ? yesterTimeStamp.getMonth() + 1
    : "0" + (yesterTimeStamp.getMonth() + 1)) +
  "" +
  (yesterTimeStamp.getDate() > 9
    ? yesterTimeStamp.getDate()
    : "0" + yesterTimeStamp.getDate());
export default {
  name: "ccq-week-picker",
  props: {
    value: {
      type: String,
      default: "",
    },
    currentType: {
      type: String,
      default: "day",
    },
    typeList: {
      type: Array,
      default: () => {
        return [
          { name: "今日", value: "day" },
          { name: "昨日", value: "oldday" },
          { name: "本周", value: "week" },
          { name: "本月", value: "month" },
          { name: "自定义", value: "custom" },
        ];
      },
    },
    /**
     * 格式化
     * 0:  2021-06-01
     * 1:  2021年06月01日
     */
    formatType: {
      type: Number,
      default: 0,
    },
    // 列的高度
    height: {
      type: [Number, String],
      default: 50,
    },
    // 自定义类型时 日期最大跨度  默认30天
    customMax: {
      type: [Number],
      default: 30,
    },
	//是否解除30天限制
	unfreeze:{
		type:Boolean,
		default:false
	}
  },
  data() {
    return {
      years: [],
      months: 12,
      days: 30,
      weeks: 52,
      pickerValue: [0, 0, 0],
      result: [],
      type: "",
      editTimeKey: 0,
      record: [], //选择过的日期记录
      isMoveing: false,
      showDays:true,
      update:0,
    };
  },
  watch: {
    pickerValue(newValue) {
      //监听控制可选择范围
      if (this.pickerValue[0] == 0) {
        //当选择最新一年时
        this.months = new Date().getMonth() + 1;
        if (this.type == "day" || this.type === "oldday") {
          //按日时  可选当天
          // 当前结果日期
          const currentValue = this.result[0].split("-");
          if (
            new Date().getFullYear() == currentValue[0] &&
            new Date().getMonth() + 1 == currentValue[1]
          ) {
            //同年当月
            this.days = new Date().getDate();
          } else {
            this.days = dayjs(this.result[0]).daysInMonth();
          }
        }
        if (this.type == "custom") {
          //按自定义时  控制日最大值
          if (this.pickerValue[1] + 1 == new Date().getMonth() + 1) {
            this.days = new Date().getDate();
          } else {
            if ([1, 3, 5, 7, 8, 10, 12].includes(this.pickerValue[1] + 1)) {
              this.days = 31;
            } else if ([4, 6, 9, 11].includes(this.pickerValue[1] + 1)) {
              this.days = 30;
            } else if (this.pickerValue[1] + 1 === 2) {
              this.days = new Date().getFullYear() % 4 ? 28 : 29;
            }
          }
        }
        if (this.type == "week") {
          //最新一年的周最大值
          if (dayjs().day() == 1) {
            //明天测
            this.weeks = dayjs().isoWeek();
          } else {
            this.weeks = dayjs().isoWeek();
          }
        }
      } else {
        if (
          this.type == "day" ||
          this.type == "custom" ||
          this.type == "oldday"
        ) {
          this.days = dayjs(this.result[0]).daysInMonth();
        }
        this.months = 12;
        this.weeks = 52;
      }
      this.showDays = true
    },
  },
  computed: {
    checkval() {
      //计算返回日期格式
      if (this.type === "day" || this.type == "oldday") {
        let weekWord = ["日", "一", "二", "三", "四", "五", "六"];

        let oldyesterTime = new Date().getTime() - 24 * 60 * 60 * 1000;
        let oldyesterTimeStamp = new Date(oldyesterTime);
        //昨天的日期20220630
        let oldyesterday =
          oldyesterTimeStamp.getFullYear() +
          "" +
          (oldyesterTimeStamp.getMonth() > 9
            ? oldyesterTimeStamp.getMonth() + 1
            : "0" + (oldyesterTimeStamp.getMonth() + 1)) +
          "" +
          (oldyesterTimeStamp.getDate() > 9
            ? oldyesterTimeStamp.getDate()
            : "0" + oldyesterTimeStamp.getDate());

        if (this.result[0] == dayjs().format("YYYY-MM-DD")) {
          return `${dayjs(this.result[0]).format("YYYY年MM月DD日")} （今日)`;
        } else if (this.result[0] == dayjs(oldyesterday).format("YYYY-MM-DD")) {
          return `${dayjs(this.result[0]).format("YYYY年MM月DD日")} （昨日)`;
        } else {
          return `${dayjs(this.result[0]).format("YYYY年MM月DD日")} （周${
            weekWord[dayjs(this.result[0]).day()]
          })`;
        }
      } else if (this.type === "week") {
        return `${dayjs(this.result[0]).format("YYYY年")}${
          this.pickerValue[1] + 1
        }周 ${dayjs(this.result[0]).format("MM月DD日")}-${dayjs(
          this.result[1]
        ).format("MM月DD日")}`;
      } else if (this.type === "month") {
        return `${dayjs(this.result[0]).format("YYYY年MM月")} ${dayjs(
          this.result[0]
        ).format("MM月DD日")}-${dayjs(this.result[1]).format("MM月DD日")}`;
      }
      return dayjs().format("YYYY-MM-DD");
    },
  },
  created() {
    this.$nextTick(() => {
      this.type = this.currentType;
      console.log(this.type, "类型");
      this.dateInit();
    });
  },
  methods: {
    pickStart() {
      this.isMoveing = true;
    },
    pickEnd() {
      this.isMoveing = false;
    },
    //添加日期选择记录
    addRecord(item) {
      var record = JSON.parse(JSON.stringify(this.record));
      record = record.filter((e) => {
        return e.type != item.type;
      });
      record.unshift(item);
      this.record = record;
    },
    async dateInit() {
      this.$set(this.pickerValue, 0, 0);
      //初始化 控制选择范围
      var date = yesterday;
      if (this.type == "oldday") {
        date = dayjs().subtract(1, "days").format("YYYYMMDD");
      }
      if (this.type == "day") date = dayjs().format("YYYYMMDD");
      let v = dayjs(date).format("YYYY-MM-DD").split("-");
      let s = Number(v[0]) - 50;
      let e = Number(v[0]);
      let y = Number(v[0]),
        y_index;
      let m = Number(v[1]);

      // 年
      let arr = []
      for (let i = s; i <= e; i++) {
        if (i == y) {
          //所选年的index
          y = i;
          y_index = e - s - (e - y);
        }
        arr.unshift(i);
      }
      this.years = arr

      // 月
      for (let i = 1; i <= 12; i++) {
        if (i == Number(m)) {
          //所选月的index
          m = i;
          break;
        }
      }
      this.$set(this.pickerValue, 1, dayjs(date).month());
      if ([1, 3, 5, 7, 8, 10, 12].includes(dayjs(date).month())) {
        this.days = 31;
      } else if ([4, 6, 9, 11].includes(dayjs(date).month())) {
        this.days = e % 4 ? 29 : 28;
      } else if (dayjs(date).month() === 2) {
        this.days = e % 4 ? 29 : 28;
      }
      this.$set(this.pickerValue, 2, dayjs(date).date() - 1);
      this.result = [
        dayjs(date).format("YYYY-MM-DD"),
        dayjs(date).format("YYYY-MM-DD"),
      ];
      const pickerValueCopy = JSON.parse(JSON.stringify(this.pickerValue));
      this.pickerValue = [];
      this.$nextTick(() => {
        this.pickerValue = pickerValueCopy;
      });
    },
    //选择日期类型
    changeType(index) {
      let type = this.typeList[index].value;
      if (this.type === type) return;
      this.type = type;
      if (type === "day") {
        this.dateInit();
      } else if (type === "oldday") {
        this.dateInit();
      } else if (type === "week") {
        this.pickerValue = [0, dayjs().isoWeek() - 1];
        this.result = [
          dayjs().startOf("isoWeek").format("YYYY-MM-DD"),
          dayjs().format("YYYY-MM-DD"),
        ];
      } else if (type === "month") {
        this.pickerValue = [0, dayjs().month()];
        this.result = [
          dayjs().startOf("month").format("YYYY-MM-DD"),
          dayjs().format("YYYY-MM-DD"),
        ];
      } else {
        this.pickerValue = [0, dayjs().month(), dayjs().date() - 1];
      }
      this.editTimeKey = 0;
    },
    // 自定义切换
    changeCustom(key) {
      if (this.editTimeKey === key) return;
      // this.showDays = false
      this.editTimeKey = key;
      let date = this.result[key].split('-')
      let years = 0
      this.years.forEach((val,index)=>{
        if(val==date[0]){
          years = index
        }
      })
      let result = [years,date[1] - 1,date[2] - 1]

      // this.$nextTick(()=>{
      //   setTimeout(()=>{
          this.pickerValue = result
      //   },300)
      // })
    },
    formatWord(num) {
      return num > 9 ? `${num}` : `0${num}`;
    },
    formatTime(time) {
      return time ? dayjs(time).format("YYYY年MM月DD日") : "";
    },
    // picker change
    //选择日期
    bindChange: function (e) {
      let v = e.detail.value;
      this.pickerValue = v;
      //限定日的选择范围
      if (this.type !== "week" && this.type !== "month") {
        if ([1, 3, 5, 7, 8, 10, 12].includes(v[1] + 1)) {
          this.days = 31;
        } else if (v[1] + 1 === 2) {
          this.days = this.years[v[0]] % 4 ? 29 : 28;
        } else {
          this.days = 30;
        }
        if (this.days < v[2] + 1) v[2] = this.days - 1;
      }
      if (this.type === "day" || this.type === "oldday") {
        this.result = [
          `${this.years[v[0]]}-${this.formatWord(v[1] + 1)}-${this.formatWord(
              v[2] + 1
          )}`,
          `${this.years[v[0]]}-${this.formatWord(v[1] + 1)}-${this.formatWord(
              v[2] + 1
          )}`,
        ];
      } else if (this.type === "week") {
        var selectWeek = v[1] + 1; //第几周
        const today = dayjs().format("YYYY-MM-DD");
        const firstDayOfWeek = dayjs()
            .isoWeek(selectWeek)
            .startOf("isoWeek")
            .format("YYYY-MM-DD");
        let endDayOfWeek = dayjs()
            .isoWeek(selectWeek)
            .endOf("isoWeek")
            .format("YYYY-MM-DD");
        if (today === endDayOfWeek) {
          endDayOfWeek = today;
        }
        this.result = [firstDayOfWeek, endDayOfWeek];
      } else if (this.type === "month") {
        let time = `${this.years[v[0]]}-${this.formatWord(v[1] + 1)}`;
        this.result = [
          dayjs(time).startOf("month").format("YYYY-MM-DD"),
          dayjs(time).endOf("month").format("YYYY-MM-DD"),
        ];
      } else if (this.type === "custom") {
        let time = `${this.years[v[0]]}-${this.formatWord(v[1] + 1)}-${this.formatWord(v[2] + 1)}`;
        this.result[this.editTimeKey] = time;
        if (this.editTimeKey == 1) {
          //调整自定义--结束时间时
          if (dayjs(this.result[0]).isAfter(dayjs(this.result[1]))) {
            this.result[0] = dayjs(this.result[1]).subtract(this.customMax, "day").format("YYYY-MM-DD");
          } else {
            if (-1 * dayjs(this.result[0]).diff(dayjs(this.result[1]), "day") >= this.customMax + 1) {
              //选择开始时间  发现与结束时间相差大于31天时

              this.$nextTick(() => {
                this.result[0] = dayjs(this.result[1])
                    .subtract(this.customMax, "day")
                    .format("YYYY-MM-DD");
                this.update++ // 更新视图
              })
            }
          }
        } else {
          //调整自定义--开始时间时
          if (dayjs(this.result[0]).isAfter(dayjs(this.result[1]))) {
            if (dayjs().isBefore(dayjs(dayjs(this.result[0]).add(this.customMax, "day").format("YYYY-MM-DD")))) {
              //增加30天后的日期大于今天
              this.result[1] = dayjs().subtract(1, "day").format("YYYY-MM-DD");
            } else {
              this.result[1] = dayjs(this.result[0]).add(this.customMax, "day").format("YYYY-MM-DD");
            }
          }
          else {
            if (dayjs(this.result[1]).diff(dayjs(this.result[0]), "day") >= this.customMax + 1) {
              //选择开始时间  发现与结束时间相差大于31天时
              this.result[1] = dayjs(this.result[0]).add(this.customMax, "day").format("YYYY-MM-DD");
            }
          }
        }
      }
      this.addRecord({
        type: this.type,
        result: this.result,
        pickerValue: this.pickerValue,
      });
    },
    // 取消
    onCancel() {
      this.$emit("cancal");
    },
    // 确认
    onSure() {
      if (this.isMoveing) {
        return;
      }
      if (this.type === "custom") {
        if (!this.result[0] || !this.result[1]) {
          return;
        }
        if (dayjs(this.result[0]).isAfter(dayjs(this.result[1]))) {
          return;
        }
      }
      this.$nextTick(() => {
        this.$emit("change", this.result, this.type, this.checkval);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ccq-week-picker {
  background-color: #ffffff;
  .typeList {
    display: flex;
    justify-content: space-between;
    padding: 24rpx;
    .typeItem {
      padding: 14rpx 32rpx;
      border-radius: 8rpx;
      border: 2rpx solid #dcdcdc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .on {
      font-size: 26rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #19b691;
      line-height: 36rpx;
      background: #e9faf3;
      border-radius: 8rpx;
      border: 2rpx solid #19b691;
    }
  }
  .valueBox {
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .valueBox-custom {
      display: flex;
      align-items: center;
      justify-content: center;
      .startTime {
        margin-right: 24rpx;
      }
      .endTime {
        margin-left: 24rpx;
      }
      .customTime {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 44rpx;
        width: 318rpx;
        height: 64rpx;
        background: #f3f3f3;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .customtext {
        // color: rgba(0,0,0,.26);
      }
      .on {
        background-color: $u-type-primary-c;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
}

.ccq-week-popup_header {
  width: 100%;
  height: 112rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 42rpx;
  border-bottom: 1rpx solid #e7e7e7;
  .cancel {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 48rpx;
  }
  .title {
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 48rpx;
  }
  .sure {
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #19b691;
    line-height: 48rpx;
  }
}

.ccq-week-popup-text {
  font-size: 32rpx;

  &.cancel {
    color: rgba(0, 0, 0, 0.6);
  }

  &.sure {
    color: #1ab592;
  }
}

.ccq-week-picker_view {
  width: 100%;
  height: 500rpx;
}

.ccq-week-picker_item {
  display: flex;
  align-items: center;
  justify-content: center;

  &.years {
    flex: 1;
  }

  &.months {
    flex: 1;
  }

  &.weeks {
    flex: 1;
  }
}

.ccq-week-picker_item_view {
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>

需要下载dayjs

页面使用：

	<u-popup v-model="showScreen" border-radius="16" mode="bottom" height="800rpx">
			<weekPicker :customMax="3600" :unfreeze="true" @change="changeTypeOption" @cancal="showScreen = false"
				ref="weekPicker">
			</weekPicker>
		</u-popup>

显示时间：

<view style="padding: 24rpx 0 0 24rpx;font-size: 32rpx;line-height: 48rpx;font-weight: 600;"
							@click="showScreen = true">{{showDate}}
							<text class="fwhfont icon-icon-caret-down" style="font-size: 40rpx;"></text>
						</view>
		// 日期变化
			changeTypeOption(arr, type, checkval) {
				console.log(arr, type, checkval);
				var now = new Date();
				var selectDate = '';
				if (type === 'day') {
					selectDate = checkval.substr(5, checkval.length);
				}
				if (type === 'week') {
					selectDate = checkval.substr(5, checkval.length);
				}
				if (type === 'month') {
					selectDate = checkval;
					if (dayjs(arr[1]).isBefore(dayjs(dayjs(now).format('YYYY-MM-DD')))) { //选择的月底日期在今天之前为true
					} else {
						let nowYear = now.getFullYear();
						let nowMonth = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1);
						let nowDate = now.getDate();
						arr[1] = nowYear + '-' + nowMonth + '-' + (nowDate > 9 ? nowDate : '0' + nowDate);
					}
				}
				if (type === 'custom') {
					selectDate = arr[0] + '-' + arr[1];
				}
				this.showScreen = false;
				this.typeSelect = type;
				this.checkval = checkval;
				this.typeOption = arr
				let stimer = (new Date(arr[0]).getTime() / 1000) + ''
				console.log(stimer, 'stimer', new Date('2023-06-26').getTime());
				this.sTime = type === 'day' ? '' : stimer;
				let etimer = new Date(arr[1])
				etimer.setHours(24, 0, 0, 0)
				this.eTime = type === 'day' ? '' : (etimer.getTime() / 1000) + '';
				this.showDate = this.getShowDate();
				this.currPage = 0;
				this.Backup()
				this.getDouTypeCouponList()
			},
			getShowDate() {
				if (this.typeSelect === 'day') {
					let weekWord = ['日', '一', '二', '三', '四', '五', '六'];
					if (!Number(this.checkval.substr(0, 4))) {
						//默认当天日期
						var nowDay = dayjs().format('YYYYMMDD');
						return nowDay.substr(4, 2) + '月' + nowDay.substr(6, 2) + '日' + '(今日)';
					}
					if (Number(this.checkval.substr(0, 4)) < currentDate.getFullYear()) {
						return this.checkval;
					} else {
						return this.checkval.substring(5); //.substr(5,this.checkval.length)
					}
				} else if (this.typeSelect === 'oldday') {
					return this.checkval.substring(5);
				} else if (this.typeSelect === 'week') {
					return this.checkval;
				} else if (this.typeSelect === 'month') {
					return this.checkval;
				} else if (this.typeSelect === 'custom') {
					var dateArr =
						this.typeOption[0].substr(0, 4) +
						'年' +
						this.typeOption[0].substr(5, 2) +
						'月' +
						this.typeOption[0].substr(8, 2) +
						'日' +
						'-' +
						(this.typeOption[0].substr(0, 4) == this.typeOption[1].substr(0, 4) ? '' : this.typeOption[1]
							.substr(0, 4) + '年') +
						this.typeOption[1].substr(5, 2) +
						'月' +
						this.typeOption[1].substr(8, 2) +
						'日';
					return dateArr;
				}
			},

南庐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview 自定义时间选择器组件_表单组件 - TimePicker 时间选择器 - 《View UI（即iView）4.2 使用手册》 - 书栈网 · BookStack...
weixin_32179097的博客
02-23 1563
TimePicker 时间选择器概述选择或输入标准时间，支持选择范围。代码示例基础用法设置属性 type 为 time 或 timerange 分别显示选择单个时间和选择范围时间类型。设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。exportdefault{}时间格式设置属性 format 可以改变时间的显...
vue+iview自定义季度选择器组件
Thea的博客
04-12 3015
先看看效果： 样式和当前iview的DatePicker类似。这里用到了iview的Input和一个自定义的下拉面板。 整体思路： 当点击Input聚焦时，触发on-focus事件设置visible=true显示下拉面板。 下拉面板分为上下两部分，上半部分为左、中、右。左右两边进行翻页显示上下年份，中间显示年份（默认为当前年份）。下半部分为所选年份的四个季度（首次打开时当前季度标亮）。 选择对应季度后组成将要在Input框上显示的内容。 Input框内添加删除按钮，当存在数据时并且鼠标在范围内则显示，点
wx小程序自定义时间选择器组件
阿乐的博客
03-02 1082
wx小程序自定义时间选择器组件开始
强力推荐：Vuetify-Datetime-Picker - 美观易用的日期时间选择器组件
gitblog_00057的博客
06-04 313
强力推荐：Vuetify-Datetime-Picker - 美观易用的日期时间选择器组件 项目地址:https://gitcode.com/darrenfang/vuetify-datetime-picker 在构建现代Web应用时，日期和时间选择器是不可或缺的一部分。今天，我们向您推荐一个基于Vuetify框架的优秀开源组件——Vuetify-Datetime-Picker。这个组件设计简洁，...
uniappx自定义picker选择器组件
weixin_73358193的博客
05-11 564
uniappx自定义封装picker选择器，采用vue3+uts组合式api写法，支持年月日，支持多列自定义数据
QML自定义时间选择器
qq_38478961的博客
10-08 3208
在进行使用qml编程过程中，需要实现日期时间的选择。 但是qml官方只提供日期控件，因此自己定义了时间控件 注意 QtQuick 2.9不要降低版本 否则会有内部的信号处理器无法使用 import QtQuick 2.9 import QtQuick.Controls 2.3 Rectangle { property int hour: 0; property int minut...
微信小程序时间选择器自定义组件
weixin_46396863的博客
03-31 2724
小程序开发中时间选择器自定义组件
uniapp 封装时间选择器组件
lwx931449660的博客
01-06 4187
本来项目基于uView UI 2.0版本开发的，时间组件本来是基于 uView dateTimePicker 组件做的二次封装，但是dateTimePicker 组件没有选择秒的功能。 所以基于 uniapp 的 picker-view 组件封装，如下： HTML <u-popup :show="show" mode="bottom" :round="round"> <view class="time-content"> <view class="hea.
uniapp 自定义时间选择组件
xiyunmengyuan的博客
02-25 7018
1.自定义时间组件的效果 2.组件的实现代码 组件文件名timeChose.vue 具体代码 <template> <view> <uni-popup ref="popcash" type="bottom" @change="popChange"> <view class="pop_phone" style="height:550upx ...
Vue自定义组件之时间跨度选择器
weixin_47276928的博客
02-15 918
时间跨度选择器 该组件是个时间跨度选择器。 基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器 点击选框，下拉列表中有四个选项，点击自定义时间，后边会出现 日期时间范围选择 代码分析 <template> <div class="flex"> <my-select v-model="space" :dataList="dataList" themeColor width="124px" @change="spaceHandle"
vue利用elementUI组件实现日期时间选择器带快捷选项且自定义时间选择
qq_42780155的博客
07-02 6649
使用element日期时间选择器带快捷选项自定义时间： 需要picker-options 和格式化value-format <el-form-item label="关闭时间：" prop="date"> <el-date-picker v-model="date" type="datetimerange" :picker-options="pickerOptions" ra
自定义时间选择器
05-26
在Android开发中，自定义时间选择器是一种常见的需求，它允许用户通过滚动界面来选择日期或时间...通过理解这些知识点并结合提供的底部弹出轮子资源，开发者可以构建出符合自己应用需求的高效且美观的时间选择器组件。
自定义简洁万能时间选择器
10-08
"自定义简洁万能时间选择器"就是这样一个组件，它允许用户在短时间内快速选取年、月、周、日、小时和分钟等时间单位，非常适合那些需要进行时间区间选择的应用场景。然而，由于其设计目标是静态的时间选择，所以可能...
安卓自定义时间选择器
05-13
系统提供了预设的时间选择器对话框，但有时为了满足特定的UI设计或者功能需求，开发者需要自定义时间选择器。本教程将深入探讨如何在安卓平台上创建自定义的时间选择器。 首先，我们从基础开始。在安卓中，`...
ios-自定义时间选择器.zip
07-11
在标题为"ios-自定义时间选择器.zip"的压缩包中，包含了一个名为"HYMDatePicker"的文件，这很可能是由开发者创建的一个自定义时间选择器组件。下面将详细讨论这个自定义选择器可能涉及的关键知识点和实现方式。 1. ...
使用Vue 自定义文件选择器组件的实例代码
11-21
为了改善这种情况，开发者常常会选择封装一个自定义的文件选择器组件。Vue.js，作为一个流行的前端框架，提供了组件化的功能，让我们能够方便地创建这种自定义组件。 首先，要创建一个自定义文件选择器组件，我们...
UEFI DebugLib 介绍
qq_43561214的博客
07-25 643
有多个Lib 对DebugPrintEnabled 做了定义，因此可以使用不同的Lib 让Debug(）产生不同的效果，这点也适用于其他函数。UefiDebugLibConOut.inf 这个Lib就是开始我们提到的将debug信息打印到Shell 使用的Lib。当我们调试程序时，可以在可能有问题的地方插入一条 INT 3 指令，使 CPU 执行到这一点时停下来。当条件为假时，断言会触发错误处理机制，通常会导致程序中。对于不同的架构实现方式可能不同，但是可以用同样的模块代码，通过替换Lib去替换实现函数。
qt开发:应用如何做静默升级更新
weixin_42602900的博客
07-24 384
qt开发:应用如何做静默升级更新
Q15 三数之和
最新发布
weixin_44554979的博客
07-25 211
我的思路，先排序，循环确定前两个值，最后一个值二分。最后两个值可以使用双指针，因为是有序的，而且是求和。
微信小程序时间选择器组件
08-26
微信小程序提供了多种时间选择器组件供开发者使用。其中包括官方提供的 picker、picker-view、picker-view-column 标签。 在微信小程序中，时间选择器组件通常由多个文件组成，包括一个 JavaScript 文件（TimeComponent.js）、一个 WXML 文件（TimeComponent.wxml）、一个 WXSS 文件（TimeComponent.wxss）和一个 JSON 文件（TimeComponent.json），它们一起构成了一个完整的时间选择器组件。 如果你想使用一个完整的时间选择器组件，你可以直接复制这些文件的代码到你的小程序的 components 目录中，然后在需要的地方引用即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [微信小程序时间选择器自定义组件](https://blog.csdn.net/weixin_46396863/article/details/123871818)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值