1. Toy模板网首页
  2. > Toy博客

微信小程序自定义日期选择器组件

9月前 作者：前端 贾公子 分类：Toy博客 阅读(55) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序自定义日期选择器组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图 

  • 默认开始时间为当天
  • 最大结束时间为当天
  • 默认结束时间为开始时间的10后

微信小程序自定义日期选择器组件

wxml 

<view class="container">
  <view class="page-body">
    <view class="selected-date" id='1' bindtap="btnTap" class="second_1_1 {{btn_type=='1'?'second_1_2':''}}">{{year}}年{{month}}月{{day}}日{{hour}}时{{minute}}分</view>
        <view class="selected-date"  id='2' bindtap="btnTap" class="second_1_1 {{btn_type=='2'?'second_1_2':''}}">{{year2}}年{{month2}}月{{day2}}日{{hour2}}时{{minute2}}分</view>
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}"  bindchange="bindChange" id='1' wx:if="{{btn_type==1}}">
      <picker-view-column>
        <view wx:for="{{years}}" wx:key="{{years}}" style="line-height: 50px; text-align: center;" wx:key="years">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{months}}" wx:key="{{months}}" style="line-height: 50px; text-align: center;"wx:key="months">{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{days}}" wx:key="{{days}}" style="line-height: 50px; text-align: center;" wx:key="days">{{item}}日</view>
      </picker-view-column>
  
     <picker-view-column>

          <view wx:for="{{hours}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}时</view>
        </picker-view-column>
          <picker-view-column>
          <view wx:for="{{minutes}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}分</view>
        </picker-view-column>
    </picker-view >
       <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value2}}" bindchange="bindChange2" id='2' wx:else>
      <picker-view-column>
        <view wx:for="{{years2}}" wx:key="{{years2}}" style="line-height: 50px; text-align: center;" wx:key="years2">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{months2}}" wx:key="{{months2}}" style="line-height: 50px; text-align: center;"wx:key="months2">{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{days2}}" wx:key="{{days2}}" style="line-height: 50px; text-align: center;" wx:key="days2">{{item}}日</view>
      </picker-view-column>
        <picker-view-column>
          <view wx:for="{{hours}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}时</view>
        </picker-view-column>
          <picker-view-column>
          <view wx:for="{{minutes}}" wx:key="index" style="line-height: 50px; text-align: center;">{{item}}分</view>
        </picker-view-column>

    </picker-view>
  </view>

</view>

 js


const date = new Date()
const globaltimer = new Date().getTime()
const globalyear = date.getFullYear()
const globalmonth = date.getMonth() + 1
const globalday = date.getDate()


function getDays(year, month) {
  var d = new Date(year, month, 0);
  return (year == globalyear && month == globalmonth) ? globalday : d.getDate();
}

function getIndex(arr, item) {
  for (var i in arr) {
    if (arr[i] == item) {
      return i;
    }
  }
}


// for (let i = 1; i <= 31; i++) {
//   days.push(i)
// }

Page({

  data: {
    years: [],
    year: globalyear,
    months: [],
    month: globalmonth,
    days: [],
    day: globalday,
    value: [],
    // ----
    years2: [],
    year2: globalyear,
    months2: [],
    month2: globalmonth,
    days2: [],
    day2: globalday,
    value2: [],
    btn_type: '1',
    hours: [],
    minutes: [],
    hour: '00',
    minute: "00",
    hour2: '23',
    minute2: "59"
  },
  // 切换事件
  btnTap: function (e) {
    var that = this;
    let data = this.data
    console.log(e);
    // 初始化选择器索引
    var btn_id = e.currentTarget.id;
    let n_yindex = data.years2.indexOf(data.year2)
    let n_mindex = data.months2.indexOf(data.month2)
    let n_dindex = data.days2.indexOf(data.day2)
    let n_minindex = getIndex(data.minutes, data.minute2)
    let n_hourindex = getIndex(data.hours, data.hour2)
    console.log(n_minindex, "[[[[[");

    let o_yndex = data.years.indexOf(data.year)
    let o_mindex = data.months.indexOf(data.month)
    let o_dindex = data.days.indexOf(data.day)
    let o_minindex = getIndex(data.minutes, data.minute)
    let o_hourindex = getIndex(data.hours, data.hour)

    that.setData({
      btn_type: btn_id,
      value2: [
        n_yindex, n_mindex, n_dindex, n_hourindex, n_minindex,
      ],
      value: [
        o_yndex, o_mindex, o_dindex, o_hourindex, o_minindex,
      ]
    });
    console.log(this.data.value2);
  },
  //获取小时
  currentHours: function (date) {
    let hours = []
    let that = this
    for (let i = 0; i <= 23; i++) {
      var k = i;
      if (0 <= i && i < 10) {
        k = "0" + i
      }
      hours.push(k)
    }
    that.setData({
      hours: hours
    });
  },
  //获取分钟
  currentMinutes: function (date) {
    let minutes = []
    let that = this
    for (let i = 0; i <= 59; i++) {
      var k = i;
      if (0 <= i && i < 10) {
        k = "0" + i
      }
      minutes.push(k)
    }
    that.setData({
      minutes: minutes
    });
  },
  // 获取十天后的日期
  getAllDateCN(startTime, endTime) {
    let that = this
    let o_days = []
    let n_days = []
    let e_year, e_month, e_day
    var i = 0
    while ((endTime.getTime() - startTime.getTime()) >= 0) {
      if (endTime.getMonth() != startTime.getMonth()) {
        o_days.push(startTime.getDate())
      } else {
        n_days.push(startTime.getDate())
      }
      e_year = endTime.getFullYear()
      e_month = endTime.getMonth() + 1
      e_day = endTime.getDate()

      startTime.setDate(startTime.getDate() + 1)
      i += 1
    }

    that.setData({
      year2: e_year,
      month2: e_month,
      day2: e_day,
      o_days: o_days,
      n_days: n_days,
      e_year: e_year,
      e_month: e_month,

    })
    return { o_days, n_days, e_year, e_month, }

  },

  onShow() {
    // 初始化选择器数组
    this.initYears1()
    this.initMonths1()
    this.currentHours()
    this.currentMinutes()
    this.initDays1(globalyear, globalmonth)
    let { years, months, days, hours, minutes } = this.data
    this.setData({
      value: [years.length - 1, months.length - 1, days.length - 1, hours[0], minutes[0]],
      years2: [globalyear],
      months2: [globalmonth],
      days2: [globalday],
      o_days: [globalday]
    })

  },
  // 初始化开始年
  initYears1() {
    let { years, } = this.data
    for (let i = 2016; i <= globalyear; i++) {
      years.push(i)
    }
    this.setData({ years })
  },
  //初始化开始月
  initMonths1() {
    let { year, months, } = this.data

    months.length = 0
    if (year == globalyear) {
      for (let i = 1; i <= globalmonth; i++) {
        months.push(i)
      }
    } else {
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
    }
    this.setData({ months })
  },
  // 初始化日
  initDays1(year, month) {

    let { days } = this.data
    days.length = 0
    let len = year ? getDays(year, month) : getDays(globalyear, globalmonth)
    for (let i = 1; i <= len; i++) {
      days.push(i)
    }
    this.setData({ days })
  },
  // 开始时间选择器事件
  bindChange(e) {
    if (this.data.btn_type == '1') {

      let val = e.detail.value,
        year = this.data.years[val[0]],
        month = this.data.months[val[1]],
        day = this.data.days[val[2]],
        hour = this.data.hours[val[3]],
        minute = this.data.minutes[val[4]];
      this.setData({ year, month, day, hour, minute })
      this.initMonths1()
      this.initDays1(year, month)
      let n_timer = null
      let nowTime = new Date(`${year}/${month}/${day}`)
      var lastTime = new Date(Date.parse(nowTime) + 9 * 24 * 60 * 60 * 1000)

      if (lastTime.getTime() > globaltimer) {
        n_timer = new Date()
      } else {
        n_timer = lastTime
      }
      let res = this.getAllDateCN(nowTime, n_timer)
      let datae = { year, month, day, ...res }
      this.initYears2(datae)
      this.initMonths2(datae)
      this.initDays2(datae)
    }
    let data = this.data
    this.setData({
      hour2: '23',
      minute2: '59'
    })



  },
  // 初始化结束年
  initYears2(data) {
    let { e_year, year } = data
    let { years2, } = this.data
    years2 = []
    if (e_year == year) {
      years2.push(e_year)
    } else {
      years2.push(year, e_year)
    }
    this.setData({
      years2
    })
  },
  //初始化结束月
  initMonths2(datae) {
    let { e_month, month, e_year, year } = datae
    let { months2, } = this.data
    months2 = []
    if (e_month == month) {//没跨月
      months2.push(e_month)
    } else if (e_year != year) { //跨年
      months2.push(e_month)
    } else {//跨月
      months2.push(month, e_month)
    }

    this.setData({
      months2
    })
  },
  // 初始化结束天
  initDays2(datae) {
    let { o_days, n_days } = datae
    console.log(o_days, n_days);

    let { days2 } = this.data
    days2 = []
    days2 = n_days
    this.setData({
      days2
    })
  },
  // 变动后初始化月
  changeYear2(year2) {
    let { months2, year, month, e_year, e_month } = this.data
    months2 = []
    if (year == e_year && month != e_month) {//跨月
      months2.push(month, e_month)
    } else {
      console.log('else', year2, year);
      if (year2 == year) {
        months2.push(month)
      } else {
        months2.push(e_month)
      }
    }
    this.setData({
      months2
    })
  },
  // 变动后初始化天
  changeDays2(month2) {
    let { days2, o_days, n_days, month } = this.data
    days2 = []
    console.log(days2, '=====');
    if (month2 == month) {
      days2 = o_days
    } else {
      days2 = n_days
    }
    //没跨月

    if (days2.length == 0) {
      days2 = n_days
    }
    this.setData({
      days2
    })

  },
  // 结束时间选择器事件
  bindChange2(e) {
    if (this.data.btn_type == '2') {

      console.log(e);
      let val = e.detail.value,
        year2 = this.data.years2[val[0]]
      this.changeYear2(year2)
      let month2 = this.data.months2[val[1]]
      this.changeDays2(month2)
      console.log(this.data.days2, '------- 天数 数组');
      console.log(this.data.days2[val[2]], '??????');
      let day2 = this.data.days2[val[2]];
      let hour2 = this.data.hours[val[3]]
      let minute2 = this.data.minutes[val[4]];
      console.log(year2, month2, day2);
      this.setData({
        year2, month2, day2, hour2, minute2
      })

    }
  },
})

wxss文章来源地址https://www.toymoban.com/news/detail-509520.html

/* pages/picker-view/picker-view.wxss */
.selected-date {
  width: 600rpx;
  height: 80rpx;
  border: 2rpx solid #ccc;
  margin: 100rpx auto;
  text-align: center;
  line-height: 80rpx;
}

.btn_active {
  border: 2rpx solid #f00;
  color: #f00;
}

.second_1_2 {
  width: 670prx;
  height: 78rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
  border: 2px solid #00B652;
  margin: 0 auto;
  text-align: center;
  line-height: 78rpx;
}

.second_1_1 {
  width: 670rpx;
  height: 78rpx;
  background: #F4F6F7;
  border-radius: 8rpx;
  margin: 0 auto;
  text-align: center;
  line-height: 78rpx;
}

到了这里，关于微信小程序自定义日期选择器组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包