uni-app（微信小程序）自定义日期选择器和时间选择器，解决IOS端和安卓端显示不同问题

最新推荐文章于 2024-09-14 07:41:00 发布
最新推荐文章于 2024-09-14 07:41:00 发布
阅读量3.2k 收藏 4
点赞数 1
分类专栏： 前端 Uni-APP 文章标签： uni-app 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44035882/article/details/128703715
版权

uni-app自定义日期选择器和时间选择器，解决IOS端和安卓端显示不同问题

描述：

原本用的原生组件picker，设置了开始时间和结束时间，安卓端可以显示可选日期时间部分，但是IOS显示的内容包括一整天时间和N个年，本来只需要选择其中七天，那么其他天不显示，IOS端可以滑到其他日期位置，但是会自己滚回来

IOS端：

在这里插入图片描述

在这里插入图片描述

安卓：

在这里插入图片描述
这里只需要八点后和19点前（8:00-19:00）的时间

因此改成自定义自写的组件
在这里插入图片描述
在这里插入图片描述

代码：

日期选择：

<template>
  <view>
    <view v-show="propDate">
      <view class="win-container">
        <view class="win-mask" />
        <view class="win-content">
          <uni-popup ref="popup" type="bottom">
            <view class="operation-title">
              <view class="cancel" @click="cancel">取消</view>
              <view class="title">选择日期</view>
              <view class="confirm" @click="okBtnTime">确定</view>
            </view>
            <picker-view
              indicator-style="height: 50px;"
              style="width: 100%; height: 300px;"
              :value="value"
              @change="bindChange"
            >
              <picker-view-column>
                <view v-for="(item, index) in years" :key="index" style="line-height: 50px; text-align: center;">{{ item }}年</view>
              </picker-view-column>
              <picker-view-column>
                <view v-for="(item, index) in months" :key="index" style="line-height: 50px; text-align: center;">{{ item }}月
                </view>
              </picker-view-column>
              <picker-view-column>
                <view v-for="(item, index) in days" :key="index" style="line-height: 50px; text-align: center;">{{ item }}日</view>
              </picker-view-column>
            </picker-view>
          </uni-popup>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    firstDay: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    // const date = new Date() // 获取系统日期
    const years = []
    const months = []
    const days = []

    console.log('年月日转换为时间戳:[当前日期][七天后]', this.fun_date(this.firstDay), this.fun_date(this.firstDay + 6))
    const startDate = this.fun_date(this.firstDay).split('-').map(Number)
    const endDate = this.fun_date(this.firstDay + 6).split('-').map(Number)

    const getYear = startDate[0]
    const getMonth = startDate[1]
    const getDate = startDate[2]

    // 年
    console.log('获取年份', startDate[0], endDate[0])
    if (startDate[0] !== endDate[0]) {
      for (let i = startDate[0]; i <= endDate[0]; i++) {
        years.push(i)
      }
    } else {
      years.push(startDate[0])
    }

    // 月
    console.log('获取月份', startDate[1], endDate[1])
    if (startDate[1] !== endDate[1]) {
      for (let i = startDate[1]; i <= endDate[1]; i++) {
        months.push(i)
      }
    } else {
      months.push(startDate[1])
    }

    // 日
    console.log('获取天', startDate[2], endDate[2])
    if (startDate[2] < endDate[2]) {
      for (let i = startDate[2]; i <= endDate[2]; i++) {
        days.push(i)
      }
    } else {
      for (let i = startDate[2]; i <= 31; i++) {
        days.push(i)
      }
    }

    return {
      years: years,
      year: getYear,
      months: months,
      month: getMonth,
      days: days,
      day: getDate,
      value: [0, 0, 0],
      isDaytime: true,
      timeInput: '',
      propDate: false,
      returnDate: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.propDate = val
        this.dateMainBtn()
      }
    }
  },
  mounted() {
    console.log('日期弹窗show')
    this.dateMainBtn()
  },
  methods: {
    fun_date(aa) {
      const date1 = new Date()
      // const time1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() // time1表示当前时间
      var date2 = new Date(date1)
      date2.setDate(date1.getDate() + aa)
      const time2 = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate()
      return time2
    },
    // 将日期分开写入对应数组

    dateMainBtn() {
      const setYear = this.year
      const setMonth = this.month
      const setDay = this.day
      const dateTimeBody = setYear + '-' + setMonth + '-' + setDay
      this.returnDate = [setYear, setMonth, setDay]
      console.log('日期弹窗默认数据', dateTimeBody)
    },
    okBtnTime() {
      console.log('日期数组', this.returnDate)
      this.$emit('change', this.returnDate)
      this.$emit('update:visible', false)
      this.timeInput = wx.getStorageSync('adminDate') + wx.getStorageSync('adminTodays')
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    // 判断元素是否在一个数组
    contains(arr, obj) {
      var i = arr.length
      while (i--) {
        if (arr[i] === obj) {
          return true
        }
      }
      return false
    },
    setDays(satrtDay, endDay) {
      const temp = []
      for (let i = satrtDay; i <= endDay; i++) {
        temp.push(i)
      }
      this.days = temp
    },
    // 选择滚动器改变触发事件
    bindChange(e) {
      const bigMonth = [1, 3, 5, 7, 8, 10, 12]
      const val = e.detail.value
      // 判断月的天数
      const setYear = this.years[val[0]]
      const setMonth = this.months[val[1]]

      const startDate = this.fun_date(this.firstDay).split('-').map(Number)
      const endDate = this.fun_date(this.firstDay + 6).split('-').map(Number)
      // 闰年
      if (startDate[1] !== endDate[1]) { // （不在同一个月）
        console.log('横跨两个月')
        if (startDate[1] === setMonth) { // 如果开始月份等于选择的月份
          console.log('开始月份等于选择的月份', startDate[1], setMonth)
          if (setMonth === 2) { // 2月特殊处理
            if (setYear % 4 === 0 && setYear % 100 !== 0) {
              console.log('闰年')
              this.setDays(startDate[2], 29)
            } else {
              console.log('非闰年')
              this.setDays(startDate[2], 28)
            }
          } else { // 非2月
          // 大月
            if (this.contains(bigMonth, setMonth)) {
              this.setDays(startDate[2], 31)
            } else {
              this.setDays(startDate[2], 30)
            }
          }
        } else if (endDate[1] === setMonth) { // 如果结束月份等于选择的月份
          console.log('结束月份等于选择的月份', endDate[2])
          this.setDays(1, endDate[2])
        }
      } else { // 在同一个月
        this.setDays(startDate[2], endDate[2])
      }
      const setDay = this.days[val[2]]
      this.year = setYear
      this.month = setMonth
      this.day = setDay
      this.isDaytime = !val[3]
      const dateTimeBody = setYear + '-' + setMonth + '-' + setDay
      console.log('滑动后的日期', dateTimeBody)
      this.returnDate = [setYear, setMonth, setDay]
      wx.setStorageSync('adminDate', dateTimeBody)
    }
  }
}
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.win-container {
  bottom: 0;
  width: 100%;
  font-size: 32rpx;
  @extend .center;
  position: fixed;
  z-index: 20;
  left: 0;

  .win-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .win-content {
    width: 100%;
    max-height: 60vh;
    position: absolute;
    // overflow: auto;
    bottom: 0;
    left: 0;
    // @extend .center;
    background-color: #FFFFFF;
    z-index: 21;
    border-radius: 32rpx 32rpx 0 0;
    .operation-title {
      @extend .center;
      height: 136rpx;
      font-size: 32rpx;
      font-weight: bold;
      align-items: center;
      view {
        flex: 1;
        text-align: center;
      }
      .title {
        font-size: 36rpx;
      }
      .cancel {
        color: #666666;
      }
      .confirm {
        color: #2E4CFF;
      }
    }
  }
}
</style>

时间选择

<template>
  <view>
    <view v-show="show">
      <view class="win-container">
        <view class="win-mask" />
        <view class="win-content">
          <uni-popup ref="popup" type="bottom">
            <view class="operation-title">
              <view class="cancel" @click="cancel">取消</view>
              <view class="title">选择日期</view>
              <view class="confirm" @click="confirm">确定</view>
            </view>
            <picker-view
              class="picker-view"
              :indicator-style="indicatorStyle"
              :value="value"
              @change="bindChange"
            >
              <picker-view-column>
                <view v-for="(item,index) in hours" :key="index" class="item">{{ item }}时</view>
              </picker-view-column>
              <picker-view-column>
                <view v-for="(item,index) in minutes" :key="index" class="item">{{ item }}分</view>
              </picker-view-column>
            </picker-view>
          </uni-popup>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isThisToday: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const date = new Date()
    const hours = []
    const hour = date.getHours() + 1
    const minutes = []
    const minute = date.getMinutes()
    console.log('hour', hour)
    for (let i = 8; i <= 19; i++) {
      if (i < 10) {
        hours.push('0' + i)
      } else {
        hours.push(i)
      }
    }
    for (let i = 0; i <= 59; i++) {
      if (i < 10) {
        minutes.push('0' + i)
      } else {
        minutes.push(i)
      }
    }
    return {
      hours,
      minutes,
      hour,
      minute,
      value: [0, 0],
      show: false,
      indicatorStyle: `height: 50px;`,
      maskStyle: 'padding:10px 0'
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.show = val
      }
    },
    isThisToday: {
      handler(val) {
        if (val) {
          this.setHours(this.getNowTime()[0], 19)
          this.setMinutes(this.getNowTime()[1], 59)
          const setHour = this.hour
          const setMinute = this.minute
          this.value = [this.hours.map(Number).map(item => item).indexOf(setHour), this.minutes.map(Number).map(item => item).indexOf(setMinute)]
        } else {
          this.setHours(8, 19)
          this.setMinutes(0, 59)
          const setHour = this.hour
          const setMinute = this.minute
          this.value = [this.hours.map(Number).map(item => item).indexOf(setHour), this.minutes.map(Number).map(item => item).indexOf(setMinute)]
        }
        console.log('日期选择了当天', val)
      }
    }
  },
  mounted() {
    this.timeMainBtn()
  },
  methods: {
    timeMainBtn() {
      const setHour = this.hour
      const setMinute = this.minute
      const dateTimeBody = setHour + '时' + setMinute + '分'
      this.returnTime = setHour + ':' + setMinute
      this.value = [this.hours.map(Number).map(item => item).indexOf(setHour), this.minutes.map(Number).map(item => item).indexOf(setMinute)]
      console.log('时间弹窗默认数据', dateTimeBody, this.value)
    },
    bindChange(e) {
      const val = e.detail.value

      const setHour = this.hours[val[0]]
      if (setHour === 19) {
        this.minutes = ['00']
      } else if ((parseInt(setHour) === this.getNowTime()[0]) && this.isThisToday) {
        this.setMinutes(this.getNowTime()[1], 59)
      } else {
        this.setMinutes(0, 59)
      }
      const setMinute = this.minutes[val[1]]
      this.value = val
      console.log('this.value', this.value)
      console.log('选择了时间', setHour + '时' + setMinute + '分', '现在的时间', ((parseInt(setHour) === this.getNowTime()[0] + 1) && this.isThisToday))
    },
    setHours(satrtHour, endHour) {
      const res = []
      for (let i = satrtHour; i <= endHour; i++) {
        if (i < 10) {
          res.push('0' + i)
        } else {
          res.push(i)
        }
      }
      this.hours = res
    },
    setMinutes(satrtMinute, endMinute) {
      const temp = []
      for (let i = satrtMinute; i <= endMinute; i++) {
        if (i < 10) {
          temp.push('0' + i)
        } else {
          temp.push(i)
        }
      }
      this.minutes = temp
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    confirm() {
      this.returnTime = this.hours[this.value[0]] + ':' + this.minutes[this.value[1]]
      console.log('现在选择的时间', this.returnTime)
      this.$emit('change', this.returnTime)
      this.$emit('update:visible', false)
    },
    // 获取当前时间
    getNowTime() {
      const date = new Date()
      const hour = date.getHours() + 1
      // hour < 10 ? '0' + date.getHours() : date.getHours()
      console.log('当前时间的小时 ', hour)
      const minute = date.getMinutes()
      // const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return [hour, minute]
    }
  }
}
</script>

<style lang="scss" scoped>
picker-view {
  width: 100%;
  height: 600rpx;
  margin-top: 20rpx;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  line-height: 100rpx;
  text-align: center;
}
.win-container {
  bottom: 0;
  width: 100%;
  font-size: 32rpx;
  @extend .center;
  position: fixed;
  z-index: 20;
  left: 0;

  .win-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .win-content {
    width: 100%;
    max-height: 80vh;
    position: absolute;
    overflow: auto;
    bottom: 0;
    left: 0;
    // @extend .center;
    background-color: #FFFFFF;
    z-index: 21;
    border-radius: 32rpx 32rpx 0 0;
    .operation-title {
      @extend .center;
      height: 96rpx;
      font-size: 32rpx;
      font-weight: bold;
      view {
        flex: 1;
        text-align: center;
      }
      .title {
        font-size: 36rpx;
      }
      .cancel {
        color: #666666;
      }
      .confirm {
        color: #2E4CFF;
      }
    }
  }
}
</style>

组件使用：

只展示部分，其他的自己补全

    <date-picker :visible.sync="visibleDate" :first-day="startDay" @change="getCheckDate" />
    <time-picker :visible.sync="visibleTime" :is-this-today="isThisToday" @change="getCheckTime" />


import TimePicker from '@/components/modal-v2/time-picker'
import DatePicker from '@/components/modal-v2/date-picker.vue'

  components: {
    TimePicker,
    DatePicker
  },

// 打开日期弹窗
    selectDate() {
      this.visibleDate = true
    },
    // 打开时间弹窗
    selectTime() {
      this.visibleTime = true
    },
    // 选择日期
    getCheckDate(val) {
      const date = val.join('-')
      console.log('getCheckDate', val, '传递回去的日期', date)
      this.$emit('dateSelect', date)
      if (date === this.getDate('start')) { // 如果选择的日期是当天的话
        this.isThisToday = true // 告诉组件选择了今天时间得限制
        // 判断当前时间是否符合时间段
        if (this.checkAuditTime('07:00', '18:00')) {
          this.time = ''
          this.$emit('timeSelect', '')
        } else {
          // this.startTime = '08:00'
        }
      } else {
        this.isThisToday = false // 告诉组件选择了今天时间得限制
      }
      this.date = val[0] + '年' + val[1] + '月' + val[2] + '日'
    },
    // 时间弹窗选择了时间
    getCheckTime(time) {
      this.$emit('timeSelect', time)
      const selectTime = time
      this.time = selectTime.split(':')[0] + '时' + selectTime.split(':')[1] + '分'
    }
鲤鱼_599
关注
专栏目录
uniapp [全端兼容] - 详细实现日期时间 “范围“ 弹框选择器功能，底部弹窗式选择日期范围组件（开始日期和结束日期，选择2个年月日），支持自定义返回数据格式、限制最大最小日期等（详细示例代码）
王佳斌
05-04 4435
uni-app，微信小程序，支付宝小程序，安卓app，苹果ios，nvue，H5网页网站，日期时间选择器，范围选择，日期时间范围选取，uniApp日期范围选择插件，弹框式范围选取，日历时间范围，选择两个日期时间，uniapp选择开始和结束日期，年月日，月份，年份，Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围，picker日期选择器和时间选择器的用法，日期选择器，uniApp微信小程序日期时间段选择(精确到年月日时分)，时间段选择限制(开始日期 结束日期相互限制)，日期选择组件 单日/日期
基于uni-app的鲜花小程序
06-07
uni-app是一个多平台的开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、微信小程序、支付宝小程序等多个平台的应用。这大大提高了开发效率，减少了维护成本。 首先，我们来深入了解uni-app框架。uni-...
uniapp的 picker 日期时间选择器
m0_52611940的博客
08-30 5888
uniapp的 picker 日期时间选择器
uniapp-datetime-picker 使用教程
最新发布
gitblog_00693的博客
09-14 1152
uniapp-datetime-picker 使用教程 项目地址:https://gitcode.com/gh_mirrors/un/uniapp-datetime-picker 1. 项目介绍 uniapp-datetime-picker 是一个基于 uni-app 框架的日期时间选择器组件。该组件支持在 uni-app 项目中快速集成日期和时间选择功能，适用于移动端和小程序开发。它提供了丰富的...
uni-app - 日期 · 时间选择器
weixin_54721820的博客
11-22 9120
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。当选择时间和日期的时候会默认直接展示当前的时间和当天的日期。
uniapp日期选择器(年 月 日)
m0_58849641的博客
10-21 4923
【代码】uniapp日期选择器(年 月 日)
uniapp获取时间年月日
m0_74265396的博客
01-03 1377
要获取当前年月日，可以使用JavaScript中的Date对象。方法返回的是0到11之间的数字，因此需要将其加1来获取实际的月份。首先创建一个Date对象以表示当前日期和时间。方法来获取年、月和日。
uniapp - 详细实现日期时间、范围选择器组件，点击底部弹出日期、时间、某个范围的选择器弹框（日期选择组件 单日/日期范围，uniapp自定义选择日、周、月、季、年的时间选择器详细示例源代码）
热门推荐
王佳斌
05-10 1万+
uniapp，微信小程序，h5网页网站，安卓苹果app，日期时间选择器，日历两个范围选择，日期选择器，时间选择器，年月日选择，小时分钟选择，uniapp日期时间及范围选择器，uniapp时间选择器_uniapp时间范围选择器，uniapp、小程序自定义选择日、周、月、季、年的时间选择器，uniapp的picker日期选择器使用及获取当天日期(时间)，uniapp开发微信小程序之时间选择器，uniapp中picker-view 封装时,分,秒选择组件，日期选择器picker(uni-app)，uniapp的
微信小程序uni-shop
05-21
uni-app是一个使用Vue.js进行多端开发的框架，支持将同一份代码编译到iOS、Android、H5以及各种小程序等多个平台。 **uni-app简介** uni-app由DCloud(即原先的HBuilder)推出，它的核心优势在于代码复用，开发者只...
使用uni-app搭建的企业OA app
03-23
uni-app是一个由Egret Wing团队开发的多端开发框架，它允许开发者使用Vue.js语法编写一次代码，就能跨平台发布到iOS、Android、H5、微信小程序、支付宝小程序等多个平台。这大大提高了开发效率，降低了维护成本。uni...
uni-app+uview+vuex+分包环境搭建
03-07
uni-app是由HBuilderX团队开发的一款多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序等多个平台运行。uni-app的核心是基于Vue.js，利用Vue的语法...
微信小程序富文本编辑editor.zip
10-13
uni-app是一个多端开发框架，它可以让开发者用一套代码同时发布到iOS、Android、H5、小程序等多个平台。这次我们将探讨uni-app中的富文本编辑器（editor）组件，以及如何在微信小程序中使用它来处理复杂的文本和图片...
uni-app日期选择器
笔记
08-11 2456
首先是这个picker选择器，mode选择日期，end是写一个范围前日期，:end就是这个日期是动态变化的，还有change函数。然后是脚本，就默认显示当前日期，设计最后范围日期为今日日期，再有一个事件函数。写个简单的日期选择器，还没搞样式，所以有点丑。
uni-app——依据uview2选择器，写一个年月日+时间（时分）选择器并以十分钟为间隔
阿金的博客
06-02 3357
uni-app——依据uview2选择器，写一个年月日+时间（时分）选择器并以十分钟为间隔
uniapp 小程序 picker 日期时间段选择（精确到年月日时分+周几）
maoge_666的博客
07-19 5845
uniapp 小程序 picker 日期时间段选择（精确到年月日时分+周几）
uniapp开发微信小程序之时间选择器
only_zing的博客
05-30 4315
时间范围选择器的ui组件以及对时间范围选择器插件的使用和改善
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 6844
自定义选择日、周、月、季、年的日期选择器组件
uniapp 日期选择器 (android&ios)
weixin_45881304的博客
03-02 1332
【代码】uniapp 日期选择器 (android&ios)
uniapp uview ＜u-datetime-picker＞时间选择器的使用 默认从当前时间开始选择
qq_59175937的博客
03-23 7645
uniapp uview 时间选择器的使用 默认从当前时间开始选择
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值