picker-view、微信小程序自定义时间选择器(非官方)

摘要:
picker-view自定义时间选择器官网的自定义时间选择器比较简陋、日期不准下面是我自己写的一个demo*参展时间˂!
picker-view自定义时间选择器
官网的自定义时间选择器比较简陋、日期不准
下面是我自己写的一个demo
picker-view、微信小程序自定义时间选择器(非官方)第1张
<view class="baseList">
  <view class="list clearfix">
    <view class="fl listName"><text class="reqIcon">*</text> 参展时间</view>
    <view class="listMain fr"bindtap="dateMainBtn">
      <!--<input   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=" 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;
   200rpx;
}
.baseList .list .listMain{
  position: relative;
   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%;
   100%;
  background-color: rgba(0,0,0,.7);
}
.propTimeBody .propTimeMain{
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
   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-view、微信小程序自定义时间选择器(非官方)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CentOS7环境搭建禅道Visio文件转EPS文件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

C++中extern关键字用法小结

总结C++中关于extern关键字的用法。 1.变量的生明和定义中 C++语言支持分离式编译机制,该机制允许将程序分割为若干个文件,每个文件可被独立编译。为了将程序分为许多文件,则需要在文件中共享代码,例如一个文件的代码可能需要另一个文件中中定义的变量。 为了支持分离式编译,C++允许将声明和定义分离开来。变量的声明规定了变量的类型和名字,即使一个名字为程...

skynet源码分析之热更新

skynet有两种方法支持热更新lua代码:clearcache和inject,在介绍skynet热更新机制之前,先介绍skynet控制台,参考官方wikihttps://github.com/cloudwu/skynet/wiki/DebugConsole 1. skynet控制台 想要使用skynet控制台,需启动debug_console服务skyn...

vue后台管理系统项目

项目介绍1.项目根目录文件 2.源码子目录结构 3.api目录 4.assets目录 5.components目录 6.mixins目录 7.permission目录 8.router目录 9.store目录 10.styles目录 11.utils目录 项目文件介绍1.安装element-ui组件实现按需加载 // 1.1.npm...

MFC中使用Picture Control控件显示OpenCV图像几种方法

本文参考自https://blog.csdn.net/byxdaz/article/details/88091164 本人测试代码如下: // ShowImageInMFCDlg.h : 头文件 // #pragma once #include <vector> #include <string> #include <ope...

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架。当然这些框架本身对于新开发的项目是有所帮助。而对于老项目,我们又想要利用vue的语法特性进行维护,又该如何呢?在此我研究了一下youzan的 vant-weapp。而发现该项目中的组件是如此编写的。 imp...

OpenCASCADE 参数曲面面积

OpenCASCADE 参数曲面面积 eryar@163.com Abstract. 本文介绍了参数曲面的第一基本公式,并应用曲面的第一基本公式,结合OpenCASCADE中计算多重积分的类,对任意参数曲面的面积进行计算。 Key Words. Parametric Curve, Parametric Surface, Gauss Integration,...