微信小程序日期选择器（起始日期与终止日期）轮子复制粘贴直接用————modal组件

最新推荐文章于 2024-07-11 14:47:36 发布

潜心专研的小张同学

最新推荐文章于 2024-07-11 14:47:36 发布

阅读量1.1k

点赞数

分类专栏：微信小程序文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/this_zq/article/details/124607579

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何在微信小程序中实现一个日期选择器，用于选择开始和结束日期。用户点击按钮可以重选日期，选择后会显示在界面上，并提供确认选择的功能。代码示例包括WXML、JS和WXSS部分，展示了日期选择器的完整实现过程。

摘要由CSDN通过智能技术生成

先上图。

每次开始默认获取当前选择的日期。
在这里插入图片描述

wxml

<view class="beijing">
  <view class="second">
    <view class="second_1">
      <view class="second_1_1">
        <button bindtap="begin" type="primary">点击重选</button>
      </view>
      <view class="second_1_2">
        <text>当前开始日期：</text>
        <text style="font-weight: bold;">{{year_0}}年{{month_0}}月{{day_0}}日</text>
      </view>
    </view>
    <view class="second_1">
      <view class="second_1_1">
        <button bindtap="end" type="primary">点击重选</button>
      </view>
      <view class="second_1_2">
        <text>当前终止日期：</text>
        <text style="font-weight: bold;">{{year_1}}年{{month_1}}月{{day_1}}日</text>
      </view>
    </view>
  </view>
</view>

<!-- 日期选择器 -->
<view wx:if="{{isShowDates}}" class="showDates">
 <modal show="true" height='60%;width:100%' bindconfirm='day0_1' no-cancel="true">
      <view class="time_text">{{year}}-{{month}}-{{day}}</view>
      <view class="time_title">
        <view class="time_title_text">年</view>
        <view class="time_title_text">月</view>
        <view class="time_title_text">日</view>
      </view>
      <picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}"  indicator-style="height: 50px;" class="view_picker" style="width: 100%;" value="{{value}}" bindchange="bindChange" >
     <!--  <text>{{years}}</text>
      <text>{{months}}</text>
      <text>{{days}}</text> -->
          <picker-view-column class="view_picker_column">
            <view wx:for="{{years}}" class="view_picker_text" wx:key="{{index}}">{{item}}</view>
          </picker-view-column>
          <picker-view-column class="view_picker_column">
            <view wx:for="{{months}}" class="view_picker_text" wx:key="{{index}}">{{item}}</view>
          </picker-view-column>
          <picker-view-column class="view_picker_column">
            <view wx:for="{{days}}"  class="view_picker_text" wx:key="{{index}}">{{item}}</view>
          </picker-view-column>
      </picker-view>
  </modal>
</view>


const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 根据年月获取当月的总天数
let getDays = function (year, month) {
  if (month === 2) {
    return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
  } else {
    return daysInMonth[month - 1]
  }
}
// 根据年月日设置当前月有多少天 并更新年月日数组
let setDate = function (year, month, day, _this) {
  let daysNum = year === nowYear && month === nowMonth ? nowDay : getDays(year, month)
  day = day > daysNum ? 1 : day
  let monthsNum = year === nowYear ? nowMonth : 12
  let years = []
  let months = []
  let days = []
  let yearIndex = 9999
  let monthIndex = 0
  let dayIndex = 0
  // 重新设置年份列表
  for (let i = 1990; i <= nowYear; i++) {
    years.push(i)
  }
  years.map((v, idx) => {
    if (v === year) {
      yearIndex = idx
    }
  })
  // 重新设置月份列表
  for (let i = 1; i <= monthsNum; i++) {
    var k = i;
    months.push(k)
  }
  months.map((v, idx) => {
    if (v === month) {
      monthIndex = idx
    }
  })
  // 重新设置日期列表
  for (let i = 1; i <= daysNum; i++) {
    var k = i;
    days.push(k)
  }
  days.map((v, idx) => {
    if (v === day) {
      dayIndex = idx
    }
  })
  _this.setData({
    //时间列表参数
    years: years,
    months: months,
    days: days,
    //选中的日期
    year: year,
    month: month,
    day: day,
    value: [yearIndex, monthIndex, dayIndex],
  })
}
Page({
 
  data: {
    //时间列表参数
    flag: false,
    years: [],
    months: [],
    days: [],
    //选中的日期
    year: nowYear,
    month: nowMonth,
    day: nowDay,
    //默认开始日期
    year_0: nowYear,
    month_0: nowMonth,
    day_0: nowDay,
    //默认终止日期
    year_1: nowYear,
    month_1: nowMonth,
    day_1: nowDay,
    value: [9999, 1, 1],
    isShowDates:false,
    flag1:0 //用于标记是起始日期与终止日期，1表示起始，2表示终止

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    setDate(this.data.year, this.data.month, this.data.day, this);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
  ,
  bindChange: function (e) {
    let val = e.detail.value
    setDate(this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this)
  }
  ,
  begin(){
    this.setData({
      isShowDates:true,
      flag1:1
    })
  },
  end() {
    this.setData({
      isShowDates: true,
      flag1: 2
    })
  },
  day0_1(){
    if(this.data.flag1==1){
      //更新开始日期
      this.setData({
        year_0: this.data.year,
        month_0: this.data.month,
        day_0: this.data.day
      })
      console.log("当前选择的开始日期：", this.data.year_0, "-", this.data.month_0, "-", this.data.day_0)
    }
    else if (this.data.flag1==2){
      //更新终止日期
      this.setData({
        year_1: this.data.year,
        month_1: this.data.month,
        day_1: this.data.day
      })
      console.log("当前选择的终止日期：", this.data.year_1, "-", this.data.month_1, "-", this.data.day_1)
    }
    console.log("点击了确定！")
    this.setData({
      isShowDates: false
    })
  }

})

wxss

/* pages/xiaoyuanka/myMoneyMoneyHistory/myMoneyMoneyHistory.wxss */
.time_text{
  text-align: center;
}
.showDates{
  position: fixed;
  width: 80%;
  height: 80%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  z-index: 9999;
}
.time_title{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.view_picker{
  height: 300rpx;
}
.view_picker_text{
  color: #000;
  font-size: 40rpx;
  text-align: center;
  line-height: 100rpx;
}


.second{
  height: 250rpx;
  width: 100%;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
  align-content: space-evenly;
  align-items: center;
  /* border: 2rpx solid black; */
  /* margin-top: 10rpx; */

}

.second_1{
  height: 100rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  /* border: 2rpx solid red; */
}

.second_1_1{
  height: 100rpx;
  width: 200rpx;
  /* border: 2rpx solid black; */
  line-height: 100rpx; /*行间距*/
  font-weight: bold;
}

.second_1_2{
  height: 100rpx;
  width: 500rpx;
  /* border: 2rpx solid black; */
  line-height: 100rpx; /*行间距*/
  /* text-decoration: underline; */
}

.beijing{
  background-image: url("https://726f-robot-448af6-1258473156.tcb.qcloud.la/%E6%A0%A1%E5%9B%AD%E5%8D%A1%E4%B8%AA%E4%BA%BA%E4%BD%99%E9%A2%9D%E8%83%8C%E6%99%AF.png?sign=eca13a0ce14e07e1681d90fcc92a67f5&t=1583836518");
  height: 100vh;
}

有一个小bug，就是当你选择完开始日期后，再去选择终止日期哪里，默认的日期就是开始日期，这里我没改如果读者想改随意，不影响最终功能。

潜心专研的小张同学

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序日期选择器（起始日期与终止日期）轮子复制粘贴直接用————modal组件

先上图。每次开始默认获取当前选择的日期。wxml<view class="beijing"> <view class="second"> <view class="second_1"> <view class="second_1_1"> <button bindtap="begin" type="primary">点击重选</button> </view>
复制链接

扫一扫

专栏目录