标签：picker propTimeBody const 自定义 color 20rpx day let 选择器

picker-view自定义时间选择器 官网的自定义时间选择器比较简陋、日期不准 下面是我自己写的一个demo

 

<view class="baseList">
  <view class="list clearfix">
    <view class="fl listName"><text class="reqIcon">*</text> 参展时间</view>
    <view class="listMain fr" bindtap="dateMainBtn">
      <!-- <input class="rightInput" placeholder="请选择日期" name='startTime' value="{{timeInput}}"></input> -->
      <view>{{timeInput == '' ? '选择时间' : timeInput}}</view>
    </view>
    <view class="propTimeBody" wx:if="{{propDate}}">
      <view class="propTimeMain">
        <view class="propTop clearfix">
          <text class="fl noBtn" bindtap="noBtnTime">取消</text>
          <text>{{year}}-{{month}}-{{day}} {{isDaytime ? "上午" : "下午"}}</text>
          <text class="fr okBtn" bindtap="okBtnTime">确定</text>
        </view>
        <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
          <picker-view-column>
            <view wx:for="{{years}}" wx:key="years" style="line-height: 50px; text-align: center;">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{months}}" wx:key="months" style="line-height: 50px; text-align: center;">{{item}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view wx:for="{{days}}" wx:key="days" style="line-height: 50px; text-align: center;">{{item}}日</view>
          </picker-view-column>
          <picker-view-column>
            <view class="icon-container" style="line-height: 50px; text-align: center;">
              上午
            </view>
            <view class="icon-container" style="line-height: 50px; text-align: center;">
              下午
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</view>

.baseList{
  padding: 40rpx 30rpx 20rpx;
}
.baseList .list{
  font-size: 32rpx;
  color: #333;
  line-height: 80rpx;
  margin-bottom: 20rpx;
}
.baseList .list .listName{
  text-align: right;
  width: 200rpx;
}
.baseList .list .listMain{
  position: relative;
  width: 470rpx;
  padding: 0 20rpx;
  text-align: left;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  line-height: 80rpx;
  height: 80rpx;
}

.propTimeBody{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.7);
}
.propTimeBody .propTimeMain{
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 111;
}
.propTimeBody .propTimeMain .propTop{
  text-align: center;
  padding: 30rpx 20rpx;
  font-size: 32rpx;
  color: #333;
}
.propTimeBody .propTimeMain .propTop .noBtn{
  color: #666;
}
.propTimeBody .propTimeMain .propTop .okBtn{
  color: #0084ff;
}

const date = new Date();//获取系统日期
const years = []
const months = []
const days = []
const bigMonth = [1, 3, 5, 7, 8, 10, 12]

//将日期分开写入对应数组

//年
var getYear = date.getFullYear()
var getMonth = date.getMonth()
var getDate = date.getDate()
for (let i = getYear - 20; i <= getYear + 20; i++) {
  years.push(i);
}

//月
for (let i = 1; i <= 12; i++) {
  months.push(i);
}

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

years: years,
    year: getYear,
    months: months,
    month: getMonth+1,
    days: days,
    day: getDate,
    value: [20, getMonth, getDate-1],
    isDaytime: true,
    timeInput: '',
    propDate: false,

dateMainBtn () {
    let setYear = this.data.year;
    let setMonth = this.data.month;
    let setDay = this.data.day
    let dateTimeBody = setYear + '-' + setMonth + '-' + setDay
    let todays = this.data.isDaytime === true ? '上午' : '下午'
    wx.setStorageSync('adminDate', dateTimeBody)
    wx.setStorageSync('adminTodays', todays)
    this.setData({
      propDate: true
    })
  },
  okBtnTime () {
   this.setData({
    propDate: false,
    timeInput: wx.getStorageSync('adminDate') + wx.getStorageSync('adminTodays'),
   })
  },
  noBtnTime () {
    this.setData({
      propDate: false
    })
  },
  //判断元素是否在一个数组
  contains: function (arr, obj) {
    var i = arr.length;
    while (i--) {
      if (arr[i] === obj) {
        return true;
      }
    }
    return false;
  },
  setDays: function (day) {
    const temp = [];
    for (let i = 1; i <= day; i++) {
      temp.push(i)
    }
    this.setData({
      days: temp,
    })
  },
  //选择滚动器改变触发事件
  bindChange: function (e) {
    const val = e.detail.value;
    //判断月的天数
    const setYear = this.data.years[val[0]];
    const setMonth = this.data.months[val[1]];
    const setDay = this.data.days[val[2]]
    //console.log(setYear + '-' + setMonth + '-' + setDay);
    //闰年
    if (setMonth === 2) {
      if (setYear % 4 === 0 && setYear % 100 !== 0) {
        console.log('闰年')
        this.setDays(29);
      } else {
        console.log('非闰年')
        this.setDays(28);
      }
    } else {
      //大月
      if (this.contains(bigMonth, setMonth)) {
        this.setDays(31)
      } else {
        this.setDays(30)
      }
    }
    this.setData({
      year: setYear,
      month: setMonth,
      day: setDay,
      isDaytime: !val[3]
    })
    let dateTimeBody = setYear + '-' + setMonth + '-' + setDay
    let todays = !val[3] === true ? '上午' : '下午'
    wx.setStorageSync('adminDate', dateTimeBody)
    wx.setStorageSync('adminTodays', todays)
  },

 

 

标签：picker,propTimeBody,const,自定义,color,20rpx,day,let,选择器
来源： https://www.cnblogs.com/yequxue/p/13061147.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。