前端项目框架搭建随笔---DatePicker组件编写

最新推荐文章于 2024-03-21 20:52:50 发布
最新推荐文章于 2024-03-21 20:52:50 发布
阅读量150 收藏 1
点赞数
文章标签： 前端 ViewUI
原文链接：https://juejin.im/post/5b9494495188255c775d7fcc
版权

距离上次更新13天了。。。


时间过的可真快



好的，让我们切入正题：

今天我们来做一个DatePicker(时间选择器)

如图：



由于时间紧迫，只实现了传入开始时间和结束时间的功能

使用插件：better-scroll，ydui的时间处理工具类

我们先上HTML和CSS代码


HTML+CSS

<template>
    <div class="zb-picker--datetime-wrapper">
      <div class="zb-picker--datetime__indicator">
        <div class="indicator__top"></div>
        <div class="indicator__main"></div> // 中间的指示器
        <div class="indicator__bottom"></div>
      </div>
      <div class="zb-picker--datetime__header">
        <span>取消</span>
        <span>{{getSelectTime}}</span>
        <span>确定</span>
      </div>
      <div class="zb-picker--datetime__content">
        <div class="picker--datetime-content__item datetime--years">
          <ul class="picker--datetime-content__item__box wheel-scroll">
            <li class="wheel-item" v-for="i in dateItem.yearsItem">{{i.name}}</li> //年份列表
          </ul>
        </div>
        <div class="picker--datetime-content__item datetime--months">
          <ul class="picker--datetime-content__item__box wheel-scroll">
            <li class="wheel-item" v-for="i in dateItem.monthsItem">{{i.name}}</li> //月份列表
          </ul>
        </div>
        <div class="picker--datetime-content__item datetime--days">
          <ul class="picker--datetime-content__item__box wheel-scroll">
            <li class="wheel-item" v-for="i in dateItem.daysItem">{{i.name}}</li> //天列表
          </ul>
        </div>
        <div class="picker--datetime-content__item datetime--hours">
          <ul class="picker--datetime-content__item__box wheel-scroll">
            <li class="wheel-item" v-for="i in dateItem.hoursItem">{{i.name}}</li> //时列表
          </ul>
        </div>
        <div class="picker--datetime-content__item datetime--mins">
          <ul class="picker--datetime-content__item__box wheel-scroll">
            <li class="wheel-item" v-for="i in dateItem.minsItem">{{i.name}}</li> //分列表
          </ul>
        </div>
      </div>
    </div>
</template>复制代码

<style scoped>
  * {
    color: black;
  }

  .zb-picker--datetime-wrapper {
    transition: transform .25s, -webkit-transform .25s;
    touch-action: none;
    will-change: transform;
    z-index: 1600;
    position: fixed;
    bottom: 0;
    background-color: white;
    width: 100%;
  }

  .zb-picker--datetime__header {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .zb-picker--datetime__header > span {
    align-items: center;
    padding: 1rem 2.6rem;
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
  }

  .zb-picker--datetime__header > span:last-child {
    color: #1890FF;
  }

  .zb-picker--datetime__content {
    height: 22rem;
    display: flex;
    flex-direction: row;
  }

  .picker--datetime-content__item {
    flex: 1;
    text-align: center;
    overflow: hidden;
  }

  .picker--datetime-content__item > .picker--datetime-content__item__box {
    display: flex;
    flex-direction: column;
    margin-top: 9rem;
  }

  .picker--datetime-content__item__box > li {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.3rem;
    user-select: none;
  }

  .zb-picker--datetime__indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
  }

  .zb-picker--datetime__indicator .indicator__main {
    position: relative;
    /*border: 1px solid #ECECEC;*/
    border-right-width: 0;
    border-left-width: 0;
    flex: 1;
  }

  .indicator__top {
    z-index: 1600;
    pointer-events: none;
    flex: 4;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8));
  }

  .indicator__bottom {
    z-index: 1600;
    pointer-events: none;
    flex: 6;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .8));
  }
</style>
复制代码

data/props里的变量：

props: {
  startTime: { // 开始时间
    required: false
  },
  endTime: { // 结束时间
    required: false
  }
},
data() {
  return {
    scrollParam: { //scroll通用参数
      scrollY: true,
      bounce: true,
      wheel: {
        selectedIndex: 0,
        rotate: 25,
        wheelWrapperClass: 'wheel-scroll',
        wheelItemClass: 'wheel-item'
      }
    },
    dateItem: {
      yearsItem: [], //年份列表
      monthsItem: [], //月份列表
      daysItem: [], //天数列表
      hoursItem: [], //时列表
      minsItem: [] //分列表
    },
    selectItem: {
      year: { //当前选择的年份
        value: 0,
        index: 0
      },
      month: { //当前选择的月份
        value: 0,
        index: 0
      },
      day: { //当前选择的天
        value: 0,
        index: 0
      },
      hour: { //当前选择的时
        value: 0,
        index: 0
      },
      min: { //当前选中的分
        value: 0,
        index: 0
      },
    }
  }
},复制代码

还有两个import

import BScroll from 'better-scroll'
import dateUtils from '@/utils/tools/DateUtils'复制代码复制代码



实现思路

首先我们先列出开发中的预知问题：

  1. 天数多月份向天数少月份转换问题
  2. 开始时间和结束时间日期圈定
  3. 更改年份后同步更改子时间单位

看起来很容易解决，但串联起来不容易

思考了半天，想了这么一种解决思路：


仔细阅读的小伙伴可能就了解了，我这种解决思路是层层递减的。也就是选中我所选择的单位时，只刷新他的子单位列表，不刷新父单位列表。


上代码：

对此我们二次封装了一堆获取日期列表的方法，供大家参考：

getYearsItems(startDate, endDate) { //获取年列表
  return dateUtils.getYearItems({
    format: '{value}年',
    startDate: startDate ? startDate : '',
    endDate: endDate ? endDate : ''
  })
},
getMonthItems(currentYear, startDate, endDate) { //获取月列表
  return dateUtils.getMonthItems({
    format: '{value}月',
    startDate: startDate ? startDate : '',
    endDate: endDate ? endDate : '',
    currentYear: currentYear ? currentYear : ''
  })
},
getDaysItems(currentYear, currentMonth, startDate, endDate) { //获取天列表
  return dateUtils.getDayItems({
    format: '{value}日',
    startDate: startDate ? startDate : '',
    endDate: endDate ? endDate : '',
    currentYear: currentYear ? currentYear : '',
    currentMonth: currentMonth ? currentMonth : '',
  })
},
getHoursItems(currentYear, currentMonth, currentDay, startHour, endHour, startDate, endDate) {
  return dateUtils.getHourItems({ //获取时列表
    format: '{value}时',
    startDate: startDate ? startDate : '',
    endDate: endDate ? endDate : '',
    currentYear: currentYear ? currentYear : '',
    currentMonth: currentMonth ? currentMonth : '',
    currentDay: currentDay ? currentDay : '',
    startHour: startHour ? startHour : 0,
    endHour: endHour ? endHour : 23
  })
},
getMinsItems(currentYear, currentMonth, currentDay, currentHour, startDate, endDate) {
  return dateUtils.getMinuteItems({ //获取分列表
    format: '{value}分',
    startDate: startDate ? startDate : '',
    endDate: endDate ? endDate : '',
    currentYear: currentYear ? currentYear : '',
    currentMonth: currentMonth ? currentMonth : '',
    currentDay: currentDay ? currentDay : '',
    currentHour: currentHour ? currentHour : '',
  })
},复制代码复制代码


获取时列表那里还需要传入开始时和结束时。空的话默认0时 - 23时


初始化：

mounted() {
  if (this.startTime && this.endTime) { //如果含有开始和结束时间
    this.dateItem.yearsItem = this.getYearsItems(this.startTime, this.endTime); //按照开始结束时间获取年份列表
    this.dateItem.monthsItem = this.getMonthItems(new Date(this.startTime).getFullYear(),
      this.startTime, this.endTime); //同上
    this.dateItem.daysItem = this.getDaysItems(new Date(this.startTime).getFullYear(),
      new Date(this.startTime).getMonth() + 1,
      this.startTime, this.endTime);  //同上
    this.dateItem.hoursItem = this.getHoursItems(new Date(this.startTime).getFullYear(),
      new Date(this.startTime).getMonth() + 1,
      new Date(this.startTime).getDate(),
      new Date(this.startTime).getHours(), 23,
      this.startTime, this.endTime);  //同上
    this.dateItem.minsItem = this.getMinsItems(new Date(this.startTime).getFullYear(),
      new Date(this.startTime).getMonth() + 1,
      new Date(this.startTime).getDate(),
      new Date(this.startTime).getHours(),
      this.startTime, this.endTime)  //同上
  } else { //如果不存在开始结束时间
    this.dateItem.yearsItem = this.getYearsItems(); //默认为空 获取当前日期前后100年的时间
    this.dateItem.monthsItem = this.getMonthItems(); //默认为空 获取当前日期前后100年的时间
    this.dateItem.daysItem = this.getDaysItems(); //默认为空 获取当前日期前后100年的时间
    this.dateItem.hoursItem = this.getHoursItems();  //默认为空 获取当前日期前后100年的时间
    this.dateItem.minsItem = this.getMinsItems(); //默认为空 获取当前日期前后100年的时间
  }

  this.$nextTick(() => { //data更新后
    //初始化当前选择项
    this.selectItem.year.value = this.dateItem.yearsItem[0].value; //获取时间列表第一个的value给默认值
    this.selectItem.year.index = 0;  //初始化日期选择列表的index为0

    this.selectItem.month.value = this.dateItem.monthsItem[0].value;
    this.selectItem.month.index = 0;

    this.selectItem.day.value = this.dateItem.daysItem[0].value;
    this.selectItem.day.index = 0;

    this.selectItem.hour.value = this.dateItem.hoursItem[0].value;
    this.selectItem.hour.index = 0;

    this.selectItem.min.value = this.dateItem.minsItem[0].value;
    this.selectItem.min.index = 0;

    this.initScroll();  //初始化scroll
  });
},复制代码

注释已经写的很清楚了~~~~



接下来我们以年列表滚动监听事件为注释例子，方便大家理解(initScroll方法)：

let self = this; //新建变量重新指向this
//年列表滚动
let YearsScroll = new BScroll(document.getElementsByClassName("datetime--years")[0], this.scrollParam); //初始化scroll
YearsScroll.on('scrollEnd', () => { //scrollEnd监听事件
  let selectYear = self.dateItem.yearsItem[YearsScroll.getSelectedIndex()].value; //获取当前选中的年份
  let selectMonth = self.dateItem.monthsItem[MonthsScroll.getSelectedIndex()].value; //获取当前选中的月份
  let selectDay = self.selectItem.day.value;  //获取当前选中的天
  self.selectItem.year.value = selectYear; //更新选中的年份
  self.selectItem.year.index = YearsScroll.getSelectedIndex();  //更新选中的年份
  if (self.startTime && self.endTime) {  //如果有开始结束日期
    if (new Date(self.startTime).getFullYear() === selectYear) { //如果开始年份===当前选择年份
      self.$nextTick(() => {
        // 重新刷新月份列表 传入开始日期的年份，开始的时间和结束时间
        self.dateItem.monthsItem = self.getMonthItems(new Date(self.startTime).getFullYear(), self.startTime, self.endTime);
        // 更新当前选中月份
        self.fixMonthDateBug();
      });
      self.$nextTick(() => {
        // 重新刷新天份列表 传入开始日期的年份,开始时间的月份，开始的时间和结束时间
        self.dateItem.daysItem = self.getDaysItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          self.startTime, self.endTime);
        // 更新当前选中天
        self.fixDaysDateBug();
      });
      self.$nextTick(() => {
        // 重新刷新时列表 传入开始日期的年份,开始时间的月份,开始时间的天份，开始时刻-23时。
        self.dateItem.hoursItem = self.getHoursItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), 23);
        // 更新当前选中时
        self.fixHourDateBug();
      });
      self.$nextTick(() => {
        // 重新刷新分列表 传入开始日期的年份,开始时间的月份,开始时间的天份，开始时刻，开始的时间和结束时间
        self.dateItem.minsItem = self.getMinsItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), self.startTime, self.endTime);
        // 更新当前选中分
        self.fixMinDateBug();
      });
      return false;
    } else if (new Date(self.endTime).getFullYear() === selectYear) { //如果是结束时间 与开始时间同理
      // 您选中了最后一个年份
      self.dateItem.monthsItem = self.getMonthItems(
        new Date(self.endTime).getFullYear(),
        self.startTime, self.endTime);
      self.$nextTick(() => {
        self.fixMonthDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.daysItem = self.getDaysItems(
          new Date(self.endTime).getFullYear(),
          self.startTime, self.endTime);
        self.fixDaysDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.hoursItem = self.getHoursItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          0, new Date(self.endTime).getHours()); //因为是结束时间，所以时刻要从0-结束时间
        self.fixHourDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          new Date(self.endTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    }
  }
  //如果没有传入开始和结束时间
  self.dateItem.monthsItem = self.getMonthItems(selectYear, null, null); //根据当前选中的年份，更新月份列表
  self.$nextTick(() => {
    // 更新当前选中月份
    self.fixMonthDateBug();
  });
  self.$nextTick(() => {
    //根据当前选中的年份和月份，更新天份列表
    self.dateItem.daysItem = self.getDaysItems(selectYear, this.selectItem.month.value, null, null);
    self.fixDaysDateBug();
  });
  self.$nextTick(() => {
    // 简单粗暴 0-23时
    self.dateItem.hoursItem = self.getHoursItems(null, null, null, 0, 23);
    self.fixHourDateBug();
  });
  self.$nextTick(() => {
    //根据当前选中的年份，月份，天，更新分份列表
    self.dateItem.minsItem = self.getMinsItems(selectYear, selectMonth, selectDay, null, null);
    self.fixMinDateBug();
  });
  return false;
});复制代码


眼尖的小伙伴看出来了，对于重新选中选项的操作，单独分了一个名为fix****DateBug的方法，那我们就继续理解下列表更新，选中切换的思路

以自动切换月份当前选中为例：

fixMonthDateBug() {
  if (!this.dateItem.monthsItem[this.selectItem.month.index]) {  // 如果当前选择的月份index没在当前的月份列表里
    /*
    * 这里要解释一下：这种情况说明当前选中的月份value和index都不在当前的月份列表内。
    * 例如：当前选择的是7.31，选中index就是32。如果切换到2月份，月份有28天，index最长29。
    * 就找不到32这个index。所以直接赋值2月份最后一天。
    * 这是月份的逻辑。其他同理还有“天”,“时”,“分”的同理逻辑。
    * 因为年是最大的单位，所以年不设置此逻辑
    * */
    this.selectItem.month.index = this.dateItem.monthsItem.length - 1;
    this.selectItem.month.value = this.dateItem.monthsItem[this.dateItem.monthsItem.length - 1].value
  } else { //如果在的话，只更新value值。
    this.selectItem.month.value = this.dateItem.monthsItem[this.selectItem.month.index].value
  }
},复制代码复制代码


这个操作是为了解决：上次选择的index超过本次列表的长度，导致没有对应值问题。

解决思路：也就是当我上次选择7.31日时，本次切换到2月份。然而2月份没有31日，那我们就重新指向选择为2月最后一天。


那么我们放出剩下的“月”，"天"，“时”，“分”监听事件(前方大量代码来袭)：

//月列表滚动
let MonthsScroll = new BScroll(document.getElementsByClassName("datetime--months")[0], this.scrollParam);
MonthsScroll.on('scrollEnd', () => {
  let selectYear = self.dateItem.yearsItem[YearsScroll.getSelectedIndex()].value;
  //选中的月份Value
  let selectMonth = self.dateItem.monthsItem[MonthsScroll.getSelectedIndex()].value;
  let selectDay = self.selectItem.day.value;
  self.selectItem.month.value = selectMonth;
  self.selectItem.month.index = MonthsScroll.getSelectedIndex();

  if (self.startTime && self.endTime) {
    if (MonthsScroll.getSelectedIndex() === 0 && new Date(self.startTime).getFullYear() === parseInt(selectYear)) {
      self.$nextTick(() => {
        self.dateItem.daysItem = self.getDaysItems(new Date(self.startTime).getFullYear(), new Date(self.startTime).getMonth() + 1, self.startTime, self.endTime);
        self.fixDaysDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.hoursItem = self.getHoursItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), 23);
        self.fixHourDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    } else if (new Date(self.endTime).getMonth() + 1 === parseInt(selectMonth) && new Date(self.endTime).getFullYear() === parseInt(selectYear)) {
      self.$nextTick(() => {
        self.dateItem.daysItem = self.getDaysItems(new Date(self.endTime).getFullYear(), new Date(self.endTime).getMonth() + 1, self.startTime, self.endTime);
        self.fixDaysDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.hoursItem = self.getHoursItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          0, new Date(self.endTime).getHours());
        self.fixHourDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          new Date(self.endTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    }
  }
  self.$nextTick(() => {
    self.dateItem.daysItem = self.getDaysItems(selectYear, selectMonth, null, null);
    self.fixDaysDateBug();
  });
  self.$nextTick(() => {
    self.dateItem.hoursItem = self.getHoursItems(null, null, null, 0, 24);
    self.fixHourDateBug();
  });
  self.$nextTick(() => {
    self.dateItem.minsItem = self.getMinsItems(selectYear, selectMonth, selectDay, null, null);
    self.fixMinDateBug();
  });
  return false;
});

//日列表滚动
let DaysScroll = new BScroll(document.getElementsByClassName("datetime--days")[0], this.scrollParam);
DaysScroll.on('scrollEnd', () => {
  self.selectItem.day.value = self.dateItem.daysItem[DaysScroll.getSelectedIndex()].value;
  self.selectItem.day.index = DaysScroll.getSelectedIndex();
  let selectYear = self.selectItem.year.value;
  let selectMonth = self.selectItem.month.value;
  let selectDay = self.selectItem.day.value;
  if (self.startTime && self.endTime) {
    if (new Date(self.startTime).getFullYear() === parseInt(selectYear)
      && new Date(self.startTime).getMonth() + 1 === parseInt(selectMonth)
      && new Date(self.startTime).getDate() === parseInt(selectDay)) {
      self.$nextTick(() => {
        self.dateItem.hoursItem = self.getHoursItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), 23);
        self.fixHourDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    } else if (new Date(self.endTime).getFullYear() === parseInt(selectYear)
      && new Date(self.endTime).getMonth() + 1 === parseInt(selectMonth)
      && new Date(self.endTime).getDate() === parseInt(selectDay)) {
      self.$nextTick(() => {
        self.dateItem.hoursItem = self.getHoursItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          0, new Date(self.endTime).getHours());
        self.fixHourDateBug();
      });
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          new Date(self.endTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    }
  }
  self.dateItem.hoursItem = self.getHoursItems(null, null, null, 0, 24);
  self.$nextTick(() => {
    self.fixHourDateBug();
  });
  self.$nextTick(() => {
    self.dateItem.minsItem = self.getMinsItems(selectYear, selectMonth, selectDay, null, null);
    self.fixMinDateBug();
  });
  return false;
})

//时列表滚动
let HoursScroll = new BScroll(document.getElementsByClassName("datetime--hours")[0], this.scrollParam);
HoursScroll.on('scrollEnd', () => {
  self.selectItem.hour.value = self.dateItem.hoursItem[HoursScroll.getSelectedIndex()].value;
  self.selectItem.hour.index = HoursScroll.getSelectedIndex();
  let selectYear = self.selectItem.year.value;
  let selectMonth = self.selectItem.month.value;
  let selectDay = self.selectItem.day.value;
  let selectHour = self.selectItem.hour.value;
  if (self.startTime && self.endTime) {
    if (new Date(self.startTime).getFullYear() === parseInt(selectYear)
      && new Date(self.startTime).getMonth() + 1 === parseInt(selectMonth)
      && new Date(self.startTime).getDate() === parseInt(selectDay)
      && new Date(self.startTime).getHours() === parseInt(selectHour)) {
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.startTime).getFullYear(),
          new Date(self.startTime).getMonth() + 1,
          new Date(self.startTime).getDate(),
          new Date(self.startTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    } else if (new Date(self.endTime).getFullYear() === parseInt(selectYear)
      && new Date(self.endTime).getMonth() + 1 === parseInt(selectMonth)
      && new Date(self.endTime).getDate() === parseInt(selectDay)
      && new Date(self.endTime).getHours() === parseInt(selectHour)) {
      self.$nextTick(() => {
        self.dateItem.minsItem = self.getMinsItems(new Date(self.endTime).getFullYear(),
          new Date(self.endTime).getMonth() + 1,
          new Date(self.endTime).getDate(),
          new Date(self.endTime).getHours(), self.startTime, self.endTime);
        self.fixMinDateBug();
      });
      return false;
    }
  }
  self.$nextTick(() => {
    self.dateItem.minsItem = self.getMinsItems(selectYear, selectMonth, selectDay, null, null);
    self.fixMinDateBug();
  });
  return false;
})

//分列表滚动
let MinsScroll = new BScroll(document.getElementsByClassName("datetime--mins")[0], this.scrollParam);
MinsScroll.on('scrollEnd', () => {
  self.selectItem.min.value = self.dateItem.minsItem[MinsScroll.getSelectedIndex()].value;
  self.selectItem.min.index = MinsScroll.getSelectedIndex();
})复制代码


注意：每一个监听事件，都是重新刷新子时间单位的列表并重新更改选择项。所以代码量从 ”年“ 到 ”分“ 是逐级递减的


剩余的日期选择项更改逻辑：

fixDaysDateBug() {
  if (!this.dateItem.daysItem[this.selectItem.day.index]) {
    this.selectItem.day.index = this.dateItem.daysItem.length - 1;
    this.selectItem.day.value = this.dateItem.daysItem[this.dateItem.daysItem.length - 1].value
  } else {
    this.selectItem.day.value = this.dateItem.daysItem[this.selectItem.day.index].value
  }
},
fixHourDateBug() {
  if (!this.dateItem.hoursItem[this.selectItem.hour.index]) {
    this.selectItem.hour.index = this.dateItem.hoursItem.length - 1;
    this.selectItem.hour.value = this.dateItem.hoursItem[this.dateItem.hoursItem.length - 1].value
  } else {
    this.selectItem.hour.value = this.dateItem.hoursItem[this.selectItem.hour.index].value
  }
},
fixMinDateBug() {
  if (!this.dateItem.minsItem[this.selectItem.min.index]) {
    this.selectItem.min.index = this.dateItem.minsItem.length - 1;
    this.selectItem.min.value = this.dateItem.minsItem[this.dateItem.minsItem.length - 1].value
  } else {
    this.selectItem.min.value = this.dateItem.minsItem[this.selectItem.min.index].value
  }
},复制代码



好了，到这里一个功能基础功能的时间选择器(DatePicker)就做完了。组件代码在码云上有托管。链接：点击这里


emmm.....求各位路过点个小心心呗~~


weixin_34015336
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
想提升一下前端技术，初学日期控件datepicker（一）
sinat_35134348的博客
12-12 496
遇到前端的一个日期控件datepicker，就突然想学习了解一下，顺便做个笔记
前端日期选择器 - bootstrap-datepicker的使用
qingkaqingka的博客
06-04 7722
datepicker官方文档地址是：https://bootstrap-datepicker.readthedocs.io/en/latest/index.html 1、首先添加js和css引用文件，在html中添加 <linkrel="stylesheet" src="> <script src=""> bootstrap.css datepicker3.cs...
前端vue uni-app基于picker封装的移动端通用增强选择器picker插件
最新发布
chenchuang0128的博客
03-21 1276
cc-pickerView是一个基于uni-app的通用增强选择器，它提供了丰富的定制选项和事件处理，使得前端开发人员可以快速构建出满足业务需求的选择器组件。cc-pickerView是基于uni-app框架的自定义组件，它提供了丰富的定制选项和事件处理，使得开发人员可以快速构建出满足业务需求的选择器组件。提高开发效率：相较于传统的选择器组件，cc-pickerView提供了更多的功能和灵活性，使得开发人员能够快速构建出满足业务需求的选择器组件，减少了开发时间和成本。
UIKit 框架之UIDatePicker
weixin_34049948的博客
04-20 70
// // ViewController.m // UIDatePicker // // Created by City--Online on 15/5/19. // Copyright (c) 2015年 XQB. All rights reserved. // #import "ViewController.h" @interface...
前端——》ant-design-vue组件的使用之四（DatePicker 日期选择框和Calendar日历的使用）
叙传
07-05 5282
日期选择器的赋值与取值 效果 实现方式 如图所示日期选择框的实现代码如下所示 html代码如下： <a-date-picker v-model="form.taskStartAt" :format="dateFormat" style="width: 100%" /> js代码如下 import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') export default { data ()
semantic-ui-calendar-react:Datepicker React组件基于语义UIReact组件
05-14
Datepicker React组件基于语义UIReact组件 我的意图是创建类似于。 在这里您可以找到一个实时示例 安装 npm npm i semantic-ui-calendar-react CDN < script src =" ...
前端项目-vuejs-datepicker.zip
09-03
本项目“前端项目-vuejs-datepicker”就是一个专为Vue.js框架设计的轻量级日期选择器组件。Vue.js作为一款流行的渐进式JavaScript框架，以其灵活性和易用性深受开发者喜爱。而vuejs-datepicker则是针对Vue.js的扩展...
前端项目-foundation-datepicker.zip
09-03
1. 下载或克隆`foundation-datepicker`的源代码，从压缩包中解压出的`foundation-datepicker-master`目录包含了所有必要的文件。 2. 将`css`目录中的`foundation-datepicker.css`文件和`js`目录中的`foundation-...
vue项目中引入vue-datepicker插件的详解
10-16
import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'; ``` 接下来，要使用vue-datepicker组件，需要在组件的template部分进行配置。根据vue-datepicker的使用说明，可以按照以下方式配置： ```html...
前端项目-bootstrap-datepicker.zip
09-03
1. **下载**：从GitHub或其他资源库获取`bootstrap-datepicker.zip`，解压得到`bootstrap-datepicker-master`文件夹。 2. **依赖**：确保项目中已经包含了Bootstrap的CSS和JS，以及jQuery库，因为Datepicker依赖于...
前端
Blueskea的博客
11-16 341
日期输入控件WdatePicker的使用 导入js文件 输入框示例 onclick="WdatePicker({el:this,isShowOthers:true,dateFmt:'yyyy-MM-dd'});" readonly/>
仿Antd组件之DatePicker组件实现（简易）
cos的博客
03-11 1882
DatePicker组件初试手
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
蒋川@卡拉云
05-22 8331
React 时间日期选择器（date-timepicker）组件,与表单、富文本、表格、拖拽等组件一样，是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外，还有非常多样的功能配合不同场景使用，比如 12/24小时，禁止选择某些日期，高亮某些日期，夜间模式，多语言，酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件，每一款都经过我实际测试，推荐给大家。
DatePicker 日期选择器
sunluyi的博客
05-05 939
DatePicker 日期选择器,单选，多选，选择日期范围
Element UI之DatePicker 日期选择器
qq2603375880的博客
11-21 1060
通常用于选择日期。
vuejs-datepicker|简单易用的Vue.js日期选择组件
热门推荐
delmarks的博客
02-22 1万+
vuejs-datepicker是一个简单易用的Vue.js日期选择组件。它使用了Bootstrap 4的样式，支持多种语言，具有直观的界面，易于配置和扩展。
5.27 picker组件
qq_63202674的博客
05-27 1475
picker picker 滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 支持 不支持 子组件 不支持。 属性 除支持通用属性外，还支持如下属性：↵ 名称 类型
前端datepicker时间范围选择框
dongyan3595的博客
05-19 941
前端datepicker时间范围选择框 已经封装测试过了, 直接下载既可以使用 datepicker前端时间范围选择-Javascript文档类资源-CSDN下载 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="UTF-8"> <link
css3 模糊渐变,css3实现背景色渐变linear-gradient()
weixin_33879932的博客
08-03 569
示例代码：linear-gradient()_CSS参考手册_web前端开发参考手册系列div {width: 600px;height: 100px;margin-top: 10px;border: 1px solid #ddd;}.test {background: linear-gradient(#fff, #333);}.test2 {background: linear-gradient...
在vue2项目中引入ant-design的DatePicker组件
05-30
在 Vue2 项目中引入 ant-design 的 DatePicker 组件，需要先安装 ant-design-vue 和 moment 两个包： ``` npm install ant-design-vue moment --save ``` 然后在 main.js 中引入 ant-design-vue： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值