有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

小程序日期选择器(实现常用日期格式)

小程序 炮渣日记 1个月前 (11-08) 51次浏览 已收录 0个评论 扫描二维码

示例简介

本文介绍项目中常用到的两种日期格式:

1、滚动选择器选择日期格式(文中显示7天非周末日期);

小程序日期选择器(实现常用日期格式)

2、卡片选择日期格式;

小程序日期选择器(实现常用日期格式)

实现过程

一、滚动选择器选择日期格式

1、文件*.wxml和*.wxss代码如下:

<view class="time-box">
  <view class="time-title">预约日期</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{dateArry}}">
    <view class="picker">
      {{dateArry[index]}}
    </view>
  </picker>
</view>
.time-box {
  padding: 32rpx 30rpx;
  display: flex;
  background-color: #fff;
}


.time-box .time-title {
  color: #9A9A9A;
  margin-right: 73rpx;
  width: 150rpx;
}


.time-box picker {
  width: 480rpx;
}

2、文件*.js存放所有功能的逻辑代码,代码实现如下:

1)滚动选择器选用组件picker的普通选择器,为了滚动选择数据,重点就是计算获取range的数据;

2)函数dateLater用于获取修改日期(date.setDate(date.getDate() + later))后的年月日和星期几的信息(dateString);

3)函数getDates用于根据传入的数字(days)来获取所有的dateString数据,并添加到dateArry,用于picker的range数据。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    index: 0,
    dateArry: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDates(7);
  },
  // 选择预约日期
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  },
  //获取d当前时间多少天后的日期和对应星期
  getDates: function (days) {
    let dateArry = [];
    for (let i = 0; i < days; i++) {
      let dateObj = this.dateLater(i);
      if (dateObj) { // 非周六日才添加
        dateArry.push(dateObj)
      }
    }
    this.setData({
      dateArry
    });
  },
  /**
   * 传入时间后几天
   * param:传入时间:later:往后多少天
   */
  dateLater: function (later) {
    let dateString = '';
    let show_day = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
    let date = new Date();
    date.setDate(date.getDate() + later); // setData实现日期的相加减
    let day = date.getDay(); // 获取星期的数字
    if (day == 0 || day == 6) { // 用于去掉周六周日
      return false;
    }
    let year = date.getFullYear();
    // 给月日补0
    let month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
    let dayNumber = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());


    let week = show_day[day];
    dateString = `${year}-${month}-${dayNumber}  ${week}`;
    return dateString;
  }
})

二、卡片选择日期格式

1、文件*.wxml和*.wxss代码如下:

为了实现选中效果,利用了radio的选择事件;所以为了能点击到radio且看不见,需要修改radio的样式在最上层且遮盖卡片并透明显示。

<radio-group class="radio-group" name="radioTag">
  <label wx:for="{{timeLabels}}" wx:key="id" class="radio {{item.checked ? 'active' : ''}}">
    <radio value="{{item.id}}" bindtap="radioChangeTag" data-id="{{item.id}}" checked="{{item.checked}}" disabled="{{item.number == 0 ? true : false}}" />
    <view class="item {{item.number == 0 ? 'disabled' : ''}}">
      <view class="time">{{item.time}}</view>
      <view class="number">{{item.number == 0 ? '已约满' : '可预约'+item.number+'人'}}</view>
    </view>
  </label>
</radio-group>
/* 预约时间段 */
.item {
  height: 104rpx;
  text-align: center;
  border: 2rpx solid #EBEBEB;
  border-radius: 8rpx;
  background-color: #fff;
  font-size: 26rpx;
  padding-top: 24rpx;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.item .time {
  color: #343434;
  margin-bottom: 8rpx;
}
.item .number {
  color: #3E7AF5;
}
.radio.active .item {
  background-color: #3E7AF5;
}
.radio.active .item .time {
  color: #fff;
}
.radio.active .item .number {
  color: #fff;
}
.item.disabled .time {
  color: #ADADAD;
}
.item.disabled .number {
  color: #FA7014;
}
/* radio样式 */
.radio-group {
  padding: 0 30rpx;
}
.radio-group .radio {
  position: relative;
  display: inline-block;
  margin: 30rpx 30rpx 0 0;
  width: 210rpx;
  height: 128rpx;
}
.radio-group .radio:nth-child(3n) {
  margin-right: 0;
}
.radio-group radio .wx-radio-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  border: 2rpx solid #f2f2f2;
  z-index: 1;
  opacity: 0;
}

2、文件*.js存放所有功能的逻辑代码,代码实现如下:

函数radioChangeTag用于判断点击id跟数组那个数据id一样,一样则选中,反之则不选中。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    timeLabels: [{
      id: 1,
      time: '09:00-09:30',
      number: 15,
      checked: true
    }, {
      id: 2,
      time: '09:30-10:00',
      number: 12,
      checked: false
    }, {
      id: 3,
      time: '10:00-10:30',
      number: 0,
      checked: false
    },{
      id: 4,
      time: '10:30-11:00',
      number: 5,
      checked: false
    }, {
      id: 5,
      time: '11:00-11:30',
      number: 2,
      checked: false
    }, {
      id: 6,
      time: '11:30-12:00',
      number: 1,
      checked: false
    },{
      id: 7,
      time: '14:30-15:00',
      number: 5,
      checked: false
    }, {
      id: 8,
      time: '15:00-15:30',
      number: 8,
      checked: false
    }, {
      id: 9,
      time: '15:30-16:00',
      number: 1,
      checked: false
    }]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  // 选择时间段(单选)
  radioChangeTag: function (e) {
    let timeLabels = this.data.timeLabels;
    let id = e.currentTarget.dataset.id;
    timeLabels.map((item, index) => {
      if (item.id == id) {
        timeLabels[index].checked = true;
      } else {
        timeLabels[index].checked = false;
      }
    });
    this.setData({
      timeLabels
    })
  }
})
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址