ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序 自定义时间组件

2022-08-22 15:04:04  阅读:191  来源: 互联网

标签:const 自定义 color 微信 date 组件 last font data


效果图

效果

代码

xml

<view class="date_bg_view">
</view>
<view class="date_content">
  <view class="date_title">
    <van-icon name="cross" class="close" size="20px" color="#999999" bindtap="onClose"/>
    <text class="date_title_txt">选择时间</text>
  </view>
  <view class="line"></view>
  <!-- 快速选择 -->
  <view class="date_quick_choose">
    <text class="date_quick_txt">快速选择</text>
    <view class="date_quick_show">
      <view class="quick_cell_flag" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-item="{{item}}" wx:if="{{item.flag}}">
        {{item.value}}
      </view>
      <view class="quick_cell" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-item="{{item}}" wx:if="{{!item.flag}}">
        {{item.value}}
      </view>
    </view>
  </view>
  <!-- 自定义时间 -->
  <view class="date_quick_choose">
    <text class="date_quick_txt">自定义时间</text>
    <view class="date_picker">
      <picker mode="date" value="{{startDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="1"  mask-style=" color='#0A3E79'">
        <view class="picker">
        {{startDate?startDate:'开始时间'}}
        </view>
      </picker> 
      <text style="width: 20rpx;height: 1rpx;background-color: #999999;"></text>
      <picker mode="date" value="{{endDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange"  data-type="2">
        <view class="picker">
          {{endDate?endDate:'结束时间'}}
        </view>
      </picker>
    </view>
  </view>
  <button class="sure_btn" bindtap="handleSure"> 确定 </button>
</view>

wxss

.date_bg_view{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.3;
  z-index: 10;
}
.date_content{
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background-color: #ffffff;
  height: 65%;
  bottom: 0;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.date_title{
  z-index: 11;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 90rpx;
}
.close{
  width: 10%;
  margin: 10rpx;
}
.date_title_txt{
  margin-left: 30%;
  align-self: center;
  font-size: 35rpx;
  font-weight: bold;
  font-family: SourceHanSansCN-Medium;
}
.line{
  width: 100%;
  margin: 10rpx;
  height: 1rpx;
  background-color: #EEEEEE;
}
.date_quick_choose{
  z-index: 11;
  width: 100%;
  padding: 20rpx;
}
.date_quick_txt{
  font-family: SourceHanSansCN-Medium;
  margin: 20rpx;
  font-size: 30rpx;
  color: #666666;
  z-index: 12;
}
.date_quick_show{
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  z-index: 12;
}
.quick_cell{
  padding: 5rpx;
  width: 29%;
  margin: 2%;
  font-size: 30rpx;
  text-align: center;
  z-index: 12;
  height: 60rpx;
  background-color: #F7F7F7;
  color: #999999;
  border-radius: 10rpx;
  font-family: SourceHanSansCN-Medium;
  border: 1rpx solid #999999;
}
.quick_cell_flag{
  padding: 5rpx;
  width: 29%;
  margin: 2%;
  font-size: 30rpx;
  text-align: center;
  z-index: 12;
  height: 60rpx;
  background-color: #FFFFFF;
  color: #0A3E79;
  border-radius: 10rpx;
  font-family: SourceHanSansCN-Medium;
  border: 1rpx solid #0A3E79;
}
.date_picker{
  display: flex;
  width: 80%;
  margin-left: 10%;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
}
.picker{
  font-size: 30rpx;
  border: 1rpx solid #0A3E79;
  padding: 10rpx 40rpx;
  background-color: #FFFFFF;
  color: #0A3E79;
  font-weight: bold;
}
.sure_btn{
  background-color: #0A3E79;
  color: #ffffff;
  font-size: 105%;
  width: 90%;
  margin-top: 90rpx;
  text-align: center;
  height: 80rpx;
}

js

import { formatDate,getTimeLastWeek,getTimeLastMonth,getTimeThreeMonth,getTimeHalfYear } from "../../utils/util";
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    dateList: [{
        id: 1,
        value: '当天',
        flag: false
      },
      {
        id: 2,
        value: '近七天',
        flag: false
      },
      {
        id: 3,
        value: '近一个月',
        flag: false
      },
      {
        id: 4,
        value: '近三个月',
        flag: false
      },
      {
        id: 5,
        value: '近半年',
        flag: false
      }
    ],
    startDate: '',
    endDate: '',
    currentTime:formatDate(new Date()),
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 快速选择
     * @param {*} e 
     */
    handleQuickChoose(e) {
      let that = this;
      let item1 = e.currentTarget.dataset.item;
      that.data.dateList.forEach(item => {
        if (item.id === item1.id) {
          item.flag = true;
        } else {
          item.flag = false;
        }
      })
      that.setData({
        dateList: that.data.dateList
      })

      switch (item1.id) {
        case 1: //当天
          console.log(1,that.data.currentTime);
          that.setData({
            startDate:that.data.currentTime,
            endDate:that.data.currentTime
          })
          break;
        case 2: //近七天
          console.log(2);
          that.setData({
            startDate:getTimeLastWeek(new Date()),
            endDate:that.data.currentTime
          })
          break;
        case 3: //近一个月
          console.log(3);
          that.setData({
            startDate:getTimeLastMonth(new Date()),
            endDate:that.data.currentTime
          })
          break;
        case 4: //近三个月
          console.log(4);
          that.setData({
            startDate:getTimeThreeMonth(new Date()),
            endDate:that.data.currentTime
          })
          break;
        case 5: //近半年
          console.log(5);
          that.setData({
            startDate:getTimeHalfYear(new Date()),
            endDate:that.data.currentTime
          })
          break;
      }
      console.log(that.data.dateList);
      // console.log(e);
    },
    /**
     * 选择时间
     */
    bindDateChange(e) {
      console.log('picker发送选择改变,携带值为', e)
      let that = this;
      let type = e.currentTarget.dataset.type
      if (type == 1) {
        that.setData({
          startDate: e.detail.value
        })
      } else {
        that.setData({
          endDate: e.detail.value
        })
      }
    },
    /**
     * 顶部关闭按钮
     */
    onClose() {
      this.triggerEvent('sync', {
        show: false
      })
    },

    /**
     * 确定
     */
    handleSure() {
      let that = this;
      if(!that.data.startDate){
        app.myShowToast('开始时间不能为空');
        return false;
      }
      if(!that.data.endDate){
        app.myShowToast('结束时间不能为空');
        return false;
      }
      if(that.data.startDate <= that.data.endDate){
        that.triggerEvent('sync', {
          show: false,
          startDate: that.data.startDate,
          endDate: that.data.endDate
        })
      }else{
        app.myShowToast('结束时间不能小于开始时间');
        return false;
      }
    
    }
  },

})

工具类 不一定运算正确,有更好的可以继续实验 三个月 以及半年还未测试多种突发情况

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}


/**
 * 当天
 * @param {*} date 
 */
const formatDate = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')  
}

/** 
* 时间戳转化为年 月 日 时 分 秒 
* number: 传入时间戳 
* format:返回格式,支持自定义,但参数必须与formateArr里保持一致 
*/
function formatTimeTwo(number, format) {
 
  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];
 
  var date = new Date(number * 1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));
 
  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));
 
  for (var i in returnArr) {
      format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}
 
/**
 * 近七天
 * @param {*} last 
 */
const getTimeLastWeek = last => {
  const year = last.getFullYear()
  const day = last.getDate()
  const ti = day - 7
  // 判断是否月初
  if (ti <= 0) {
    const month = last.getMonth() + 1 - 1
    const d = new Date(year, month, 0)
    const dayBig = d.getDate() //获取当月的所有天数
    const ti1 = dayBig + ti
    return [year, month, ti1].map(formatNumber).join('-')
  } else {
    const month = last.getMonth() + 1
    return [year, month, ti].map(formatNumber).join('-')
  }
  // return [year, month, day].map(formatNumber).join('-')

}

/**
 * 近1个月
 * @param {*} last 
 */
const getTimeLastMonth = last => {
  const year = last.getFullYear()
  const day = last.getDate()
  const ti = day - 30 
  // 判断是否月初
  if (ti <= 0) {
    const month = last.getMonth() + 1 - 1
    const d = new Date(year, month, 0)
    const dayBig = d.getDate() //获取当月的所有天数
    const ti1 = dayBig + ti
    return [year, month, ti1].map(formatNumber).join('-')
  } else {
    const month = last.getMonth() + 1
    return [year, month, ti].map(formatNumber).join('-')
  }
}

/**
 * 近3个月
 * @param {*} last 
 */
const getTimeThreeMonth = last => {
  const year = last.getFullYear()
  const month = last.getMonth() + 1
  const day = last.getDate()
  // 判断三个月的开始月份
  const startMonth = month - 3;
  // 判断是否是年初
  if(startMonth <= 0){
    year = year - 1 ;
  }
  return [year, startMonth, day].map(formatNumber).join('-')
}

/**
 * 近3个月
 * @param {*} last 
 */
const getTimeHalfYear = last => {
  const year = last.getFullYear()
  const month = last.getMonth() + 1
  const day = last.getDate()
  // 判断三个月的开始月份
  const startMonth = month - 6;
  // 判断是否是年初
  if(startMonth <= 0){
    year = year - 1 ;
  }
  return [year, startMonth, day].map(formatNumber).join('-')
}

/**
 * 赋0
 * @param {*} n 
 */
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime: formatTime,
  formatDate:formatDate,
  formatTimeTwo: formatTimeTwo,
  getTimeLastWeek:getTimeLastWeek,
  getTimeLastMonth:getTimeLastMonth,
  getTimeThreeMonth:getTimeThreeMonth,
  getTimeHalfYear:getTimeHalfYear
}

父视图

引入组件

## 引入
"datePicker":"../../../components/datePicker/index"

应用

<!-- 时间选择组件 bind:sync 子类回传数据的方法-->
<datePicker wx:if="{{show}}" bind:sync="syncGetDate"></datePicker>

js

 syncGetDate(e){
  let that = this;
  let show = e.detail.show; 
  if(!show){ // 子组件点击了关闭   关闭弹窗
    that.setData({
      show:false
    })
  }
  console.log("子组件:",e);
  // that.getPurchaseList();
}

子组件

标签:const,自定义,color,微信,date,组件,last,font,data
来源: https://www.cnblogs.com/depressiom/p/16612755.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有