日期-日历-选择器实现（图文并茂）

迈不过友情╰ 2024-03-30 09:47 94阅读 0赞

#### 文章目录 ####

*   *  日历模板效果图展示
     *  功能点介绍
     *  完整代码（cv即可）
     *   *  index.wxml
         *  index.wxss
         *  index.js
     *  日期时间选择器效果图展示
     *  1、使用小程序原生的picker
     *   *  ①普通选择器：mode = selector
         *  ②多列选择器：mode = multiSelector
         *  ③时间选择器：mode = time
         *  
         *  ④日期选择器(上面有效果图)
         *  ⑤省市区选择器：mode = region
     *  2、如何使用原生的picker年月日 时分秒=共同选择
     *   *  效果图
         *  完整代码
         *   *  index.wxml
             *  index.js
             *  dateTimePicker.js

### 日历模板效果图展示 ###

![在这里插入图片描述][232ba74c8a374f8a8e2b96341e971f46.png_pic_center]

### 功能点介绍 ###

相当于留言谱，用于记录留言的历史纪录功能。主要实现的功能点在于-前端页面日历的动态搭建，哪一年哪一月哪一日对应的历史纪录。进行显示-当点击回忆录时跳转页面或者模态框实现显示。扩展-页面还可以整的更好看些，作为打卡等，本猿能力有限。

### 完整代码（cv即可） ###

微信小程序前端-跟vuejs基本没有多大差别-view改成div即可。也就是说都适用。

#### index.wxml ####

<view class="calendar">
      <view class="calendarTop">
        <text class="calendarTopL" catchtap="prev">{
        {
        '<'}}< /text>
            <text class="calendarTopC">{
        {
        nowYear}}年{
        {
        nowMonthStr}}月</text>
            <text class="calendarTopR" catchtap="next">{
        {
        '>'}}</text>
      </view>
      <view class="calendarWeek">
        <text class="calendarWeekItem" wx:for="{
        {weekList}}" wx:key="item">{
        {
        item}}</text>
      </view>
      <view class="calendarDate">
        <text class="calendarDateItem {
        {item.now ? 'dateItemNow' : ''}} {
        {item.gray ? 'dateItemGray' : ''}}" wx:for="{
        {month}}" bindtap="memoirbtn" data-time="{
        {item.timeDate}}" wx:key="index">{
        {
        item.text}}
          <text class="memoirNow">{
        {
        item.memoir}}</text>
        </text>
      </view>
    </view>

#### index.wxss ####

.calendar {
        
      width: 100%;
      border-top: 1rpx solid #00000005;
      background-color: #FFF2C7;
      margin: 0 auto;
    }
    
    .calendarTop {
        
      padding-top: 22rpx;
      display: flex;
      justify-content: center;
      position: relative;
    }
    
    .calendarTopL {
        
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      height: 36rpx;
      line-height: 36rpx;
      position: absolute;
      left: 34rpx;
      top: 22rpx;
    }
    
    .calendarTopC {
        
      font-size: 26rpx;
      font-weight: 600;
      color: #333333;
      height: 36rpx;
      line-height: 36rpx;
    }
    
    .calendarTopR {
        
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      height: 36rpx;
      line-height: 36rpx;
      position: absolute;
      right: 34rpx;
      top: 22rpx;
    }
    
    .calendarWeek {
        
      display: flex;
      flex-direction: row;
      padding-top: 24rpx;
    }
    
    .calendarWeekItem {
        
      width: 60rpx;
      height: 60rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #999999;
      line-height: 60rpx;
      text-align: center;
      margin-left: 40rpx;
    }
    
    .calendarDate {
        
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    .calendarDateItem {
        
      width: 100rpx;
      height: 200rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #333333;
      line-height: 60rpx;
      text-align: center;
      border: 1rpx solid rgba(0, 0, 0, 0.4);
    }
    
    .memoirNow {
        
      display: flex;
      width: 100%;
      height: 140rpx;
      background: #FCC001;
    }
    
    .dateItemNow {
        
      background: #2E8CFF;
      color: #FFFFFF;
    }
    
    .dateItemGray {
        
      color: #CCCCCC;
    }

#### index.js ####

Page({
        
      /**
       * 页面的初始数据
       */
      data: {
        
        weekList: ['一', '二', '三', '四', '五', '六', '日'], //一周
        month: [
          {
        
            // text   此值为日期值，类型为number
            // now    此值为今天，在本月的周末为false，其它时候为true，类型为布尔
            // gray   此值为日期置灰，本月中的上月和下月日期以及本月的周末，类型为布尔
          }
        ],//一个月所有数据
        nowYear: 0,//选择的年
        nowMonth: 0,//选择的月
        nowMonthStr: '',//转换格式的月
        today: 0,//今天
        memorandum: [{
         "creationTime": "2022-12-12" }, {
         "creationTime": "2022-12-16" }, {
         "creationTime": "2022-12-03" }],  //为了演示，此为模拟数据，也可从后端获取数据源
      },
      //回忆录 进行点击查看内容-（作为参考）
      // memoirbtn(e) {
        
      //   //根据前端传过来的时间，还有用户标识，进行表查询，最终跳转页面-显示到前端页面上内容
      //   var index = e.currentTarget.dataset.time;
      //   console.log("传过来的值是想要的" + index);
      //   if (index != "") {
        
      //     wx.navigateTo({
        
      //       url: '/pages/time_record/index?dateTime=' + index,
      //     })
      //   } else {
        
      //     wx.showToast({
        
      //       title: '当日未建立任务点',
      //       icon: 'error',
      //       duration: 1500
      //     })
      //   }
      // },
      // 获取当前年月日
      gainDate() {
        
        let d = Reflect.construct(Date, []);
        this.setData({
        
          nowYear: d.getFullYear(),
          nowMonth: d.getMonth() + 1,
          today: d.getDate(),
          nowMonthStr: (d.getMonth() + 1).toString().padStart(2, '0')
        })
      },
      // 上个月
      prev() {
        
        if (this.data.nowMonth > 1) {
        
          this.setData({
        
            nowMonth: this.data.nowMonth - 1,
            nowMonthStr: (this.data.nowMonth - 1).toString().padStart(2, '0')
          })
        } else {
        
          this.setData({
        
            nowYear: this.data.nowYear - 1,
            nowMonth: 12,
            nowMonthStr: "12"
          })
        };
        this.todayProminent()
        this.dateInit()
      },
      // 下个月
      next() {
        
        if (this.data.nowMonth < 12) {
        
          this.setData({
        
            nowMonth: this.data.nowMonth + 1,
            nowMonthStr: (this.data.nowMonth + 1).toString().padStart(2, '0')
          })
        } else {
        
          this.setData({
        
            nowYear: this.data.nowYear + 1,
            nowMonth: 1,
            nowMonthStr: "01"
          })
        }
        this.todayProminent()
        this.dateInit()
      },
      //今天日期凸显
      todayProminent() {
        
        // 将今天置为0
        this.setData({
        
          today: 0
        })
        let d = Reflect.construct(Date, []);
        if (d.getFullYear() == this.data.nowYear && d.getMonth() + 1 == this.data.nowMonth) {
        
          this.setData({
        
            today: d.getMonth() + 1 > this.data.nowMonth + 1 ? 0 : d.getDate()
          })
        }
      },
      // 日历主体
      dateInit() {
        
        let now = Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth - 1]); //当前月份的一号
        let startWeekNow = now.getDay(); //当前月份的一号对应的星期
        let end = Reflect.construct(Date, [Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth]) - 10]);// 当前月份的最后一号
        let endWeekNow = end.getDay(); //当前月份的最后一天对应的星期
        let dayNumNow = Reflect.construct(Date, [this.data.nowYear, this.data.nowMonth, 0]).getDate(); //当前月有多少天
        let dayNumPrev = Reflect.construct(Date, [this.data.nowYear - 1 ? this.data.nowYear : this.data.nowYear - 1, this.data.nowMonth - 1 ? this.data.nowMonth - 1 : 12, 0]).getDate(); //上个月有多少天
    
        let prevMonthShow = []; //上个月日期展示的数据
        let nowMonthShow = []; //本月日期展示的数据
        let nextMonthShow = []; //下个月日期展示的数据
        //进行判断是否有内容  先确认当今是几年几月，然后调用后端方法，查询出全部数据，进行匹配
        console.log("当前年月" + this.data.nowYear + "-" + this.data.nowMonth)
        var memoir = "";
        var timeDate = "";
        var times = "";
        //标记几年几月几日，标记是否有值
        for (let i = 1; i < (startWeekNow ? startWeekNow : 7); i++) {
        
          if (this.data.nowMonth == 1) {
        
            timeDate = (this.data.nowYear - 1) + "-" + 12
          } else {
        
            timeDate = (this.data.nowYear) + "-" + (this.data.nowMonth - 1)
          }
          if ((dayNumPrev - i + 1) < 10) {
        
            times = "0" + (dayNumPrev - i + 1);
          } else {
        
            times = dayNumPrev - i + 1
          }
          timeDate = timeDate + "-" + times;
          memoir = this.creationTime(timeDate);
          prevMonthShow.unshift( //头部添加
            {
        
              text: dayNumPrev - i + 1, //30   29  28
              now: false,
              gray: true,
              timeDate: timeDate,
              memoir: memoir
            }
          )
        };
        for (let i = 1; i <= dayNumNow; i++) {
        
          if (i < 10) {
        
            times = "0" + i;
          } else {
        
            times = i;
          }
          timeDate = this.data.nowYear + "-" + this.data.nowMonth + "-" + times;
          memoir = this.creationTime(timeDate);
          if (this.data.today == i) {
        
            nowMonthShow.push(
              {
        
                text: i,
                now: true,
                gray: false,
                timeDate: timeDate,
                memoir: memoir
              }
            )
          } else {
        
            nowMonthShow.push(
              {
        
                text: i,
                now: false,
                gray: false,
                timeDate: timeDate,
                memoir: memoir
              }
            )
          }
        };
        for (let i = 1; i <= (endWeekNow ? 7 - endWeekNow : 0); i++) {
        
          if (this.data.nowMonth == 12) {
        
            timeDate = (this.data.nowYear + 1) + "-" + "01"
          } else {
        
            timeDate = (this.data.nowYear) + "-" + (this.data.nowMonth + 1)
          }
          if (i < 10) {
        
            times = "0" + i;
          } else {
        
            times = i;
          }
          timeDate = timeDate + "-" + times;
          memoir = this.creationTime(timeDate);
          nextMonthShow.push(
            {
        
              text: i,
              now: false,
              gray: true,
              timeDate: timeDate,
              memoir: memoir
            }
          )
        };
        this.setData({
        
          month: [...prevMonthShow, ...nowMonthShow, ...nextMonthShow]
        })
    
      },
      creationTime(timeDate) {
        
        var memoir = "";
        let memorandum = this.data.memorandum || [];
        console.log("后端传过来的值为：" + memorandum.length);
        memorandum.forEach(element => {
        
          //把标准时间转换成自己想要的格式类型
          var dateee = new Date(element.creationTime).toJSON();
          var time1 = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{
        3}Z/, '')
          //进行转换-例如2022-12-12 12:12:36 转成 2022-12-12 省略时分秒
          var date2 = /\d{
        4}-\d{
        1,2}-\d{
        1,2}/g.exec(time1)
          if ((new Date(date2).getTime()) == (new Date(timeDate).getTime())) {
        
            memoir = "回忆录";
          }
        });
        return memoir;
      },
      // duckMemorandum() {  //初始化数据-（作为参考）
      //   var that = this;
      //   wx.request({
        
      //     url: 'http://localhost:8081/duckMemorandum/list',
      //     method: 'GET',
      //     data: {
        
      //       userId: 1
      //       //需要传入用户id
      //     },
      //     // 请求成功时的处理
      //     success: function (res) {
        
      //       // 一般在这一打印下看看是否拿到数据
      //       console.log(res.data)
      //       if (res.data.code = 200) {
        
      //         that.setData({
        
      //           memorandum: [...res.data.data]
      //         })
    
      //       }
      //     },
      //     // 请求失败时的一些处理
      //     fail: function () {
        
      //       wx.showToast({
        
      //         icon: "none",
      //         mask: true,
      //         title: "接口调用失败，请稍后再试。",
      //       });
      //     }
      //   })
      // },
      /**
     * 生命周期函数--监听页面加载
     */
      onLoad(options) {
        
        // this.duckMemorandum();
        this.gainDate();
        this.dateInit()
      },
    })

### 日期时间选择器效果图展示 ###

![在这里插入图片描述][cea355abb4344fb1b4c16e5f9b42728e.png_pic_center]

### 1、使用小程序原生的picker ###

从底部弹起的滚动选择器。

#### ①普通选择器：mode = selector ####

选择器用mode来区别,默认是普通选择器,e.detail.value拿到的值是选择了项的索引index,再通过array拿到值.在data里面做初始化的时候,将备选项加入array即可.  
选择时触发bindPickerChange事件,获取index.  
index.wxml

<picker bindchange="pickChange" value="{
        {index}}" range="{
        {array}}">
        <view>
            当前选择的国家：{
        {
        array[index]}}
        </view>
      </picker>

index.js

Page({
        
      data:{
        
        array:['中国','美国','日本','韩国'],
        index:0
      },
      pickChange:function(e){
        
        this.setData({
        
          index:e.detail.value
        });
      }
    })

#### ②多列选择器：mode = multiSelector ####

![在这里插入图片描述][1a05b81c2c224db8907e45617975a5d7.png_pic_center]

**index.wxml**

<view>
      <view class="section__title">多列选择器</view>
      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
        value="{
        {multiIndex}}" range="{
        {newArr}}">
        <view class="picker">
          当前选择： <van-button type="primary">
            {
        {
        newArr[0][multiIndex[0]]}}，{
        {
        newArr[1][multiIndex[1]]}}，{
        {
        newArr[2][multiIndex[2]]}}</van-button>
        </view>
      </picker>
    </view>

**index.js**

Page({
        
      /**
       * 页面的初始数据
       */
      data: {
        
        multiArray: [{
        
          id: 1,
          label: "河南省",
          children: [{
        
            id: 2,
            label: "郑州市",
            children: [{
        
              id: 3,
              label: "中原区",
            },
            {
        
              id: 4,
              label: "二七区",
            },
            {
        
              id: 5,
              label: "金水区",
            },
            ],
          },
          {
        
            id: 7,
            label: "商丘市",
            children: [{
        
              id: 8,
              label: "民权县",
            },
            {
        
              id: 9,
              label: "柘城县",
            },
            {
        
              id: 10,
              label: "宁陵县",
            },
            ],
          },
          ],
        },
        {
        
          id: 17,
          label: "浙江省",
          children: [{
        
            id: 18,
            label: "杭州市",
            children: [{
        
              id: 19,
              label: "西湖区",
            },
            {
        
              id: 20,
              label: "萧山区",
            },
            ],
          },
          {
        
            id: 21,
            label: "金华市",
            children: [{
        
              id: 22,
              label: "金东区",
            },
            {
        
              id: 23,
              label: "婺城区",
            },
            ],
          },
          ],
        },
        ],
        multiIndex: [0, 0, 0],
        multiIds: [],
        newArr: [],
      },
    
      bindMultiPickerChange(e) {
        
        console.log(this.data.multiIds);
      },
      bindMultiPickerColumnChange(e) {
        
        let data = {
        
          newArr: this.data.newArr,
          multiIndex: this.data.multiIndex,
          multiIds: this.data.multiIds,
        };
        data.multiIndex[e.detail.column] = e.detail.value;
    
        let searchColumn = () => {
        
          let arr1 = [];
          let arr2 = [];
          this.data.multiArray.map((v, vk) => {
        
            if (data.multiIndex[0] === vk) {
        
              data.multiIds[0] = {
        
                ...v,
              };
              v.children.map((c, ck) => {
        
                arr1.push(c.label);
                if (data.multiIndex[1] === ck) {
        
                  data.multiIds[1] = {
        
                    ...c,
                  };
                  c.children.map((t, vt) => {
        
                    arr2.push(t.label);
                    if (data.multiIndex[2] === vt) {
        
                      data.multiIds[2] = {
        
                        ...t,
                      };
                    }
                  });
                }
              });
            }
          });
          data.newArr[1] = arr1;
          data.newArr[2] = arr2;
        };
        switch (e.detail.column) {
        
          case 0:
            // 每次切换还原初始值
            data.multiIndex[1] = 0;
            data.multiIndex[2] = 0;
            // 执行函数处理
            searchColumn();
            break;
          case 1:
            data.multiIndex[2] = 0;
            searchColumn();
            break;
        }
        this.setData(data);
      },
    
      multiArrayshow() {
        
        let state = {
        
          arr: [],
          arr1: [],
          arr2: [],
          arr3: [],
          multiIds: []
        }
        this.data.multiArray.map((v, vk) => {
        
          state.arr1.push(v.label);
          if (this.data.multiIndex[0] === vk) {
        
            state.multiIds[0] = v;
          }
          if (state.arr2.length <= 0) {
        
            v.children.map((c, ck) => {
        
              state.arr2.push(c.label);
              if (this.data.multiIndex[1] === ck) {
        
                state.multiIds[1] = c;
              }
              if (state.arr3.length <= 0) {
        
                c.children.map((t, tk) => {
        
                  state.arr3.push(t.label);
                  if (this.data.multiIndex[2] === tk) {
        
                    state.multiIds[2] = t;
                  }
                });
              }
            });
          }
        });
        state.arr[0] = state.arr1;
        state.arr[1] = state.arr2;
        state.arr[2] = state.arr3;
        this.setData({
        
          newArr: state.arr,
          multiIds: state.multiIds,
        });
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
        this.multiArrayshow();
      },
    });

**index.wcss**

.section__title{
        
      display: flex;
      align-content: center;
      justify-content: center;
      font-size: 42rpx;
      font-weight: bold;
    }
    .picker{
        
      font-size: 36rpx;
      color: red;
      background: black;
    }

#### ③时间选择器：mode = time ####

mode = time时,是时间选择器.start,end分别是有效时间范围的开始和结束.格式hh:mm  
选择时触发bindTimeChange事件,获取time.  
![在这里插入图片描述][9e9fabf3ed3d469fa0f005231daeab27.png_pic_center]

index.wxml

<view class="title_rq">
      <picker mode="time" name="creationTime" value="{
        {creationTime}}" start="00:00" end="24:60" bindchange="bindDateChange">
        {
        {
        creationTime}}
      </picker>
    </view>

index.js

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        creationTime: "请选择时间" 
      },
    
      // 点击日期组件确定事件 
      bindDateChange: function (e) {
        
        this.setData({
        
          creationTime: e.detail.value
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
    
      },
    
    })

index.wcss

.title_rq {
        
      position: absolute;
      top: 12%;
      left: 5%;
      width: 90%;
      height: 70rpx;
      background: #f3e306;
      border: 1rpx solid black;
      font-size: 36rpx;
      color: #3D3D3D;
    }

####  ####

#### ④日期选择器(上面有效果图) ####

mode = date时,是时间选择器.start,end分别是有效日期范围的开始和结束.格式yyyy-MM-dd  
选择时触发bindDateChange事件,获取date  
index.wxml

<view class="title_rq">
      <picker mode="date" name="creationTime" value="{
        {creationTime}}" start="1920-01-01" end="2099-01-01" bindchange="bindDateChange">
        {
        {
        creationTime}}
      </picker>
    </view>

index.js

Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        creationTime: "请选择日期" 
      },
    
      // 点击日期组件确定事件 
      bindDateChange: function (e) {
        
        this.setData({
        
          creationTime: e.detail.value
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
    
      },
    
    })

index.wcss

#### ⑤省市区选择器：mode = region ####

之前单独做过一栏：可供参考：  
[简易实现][Link 1]  
[java前后端实现][java]  
[java-vue前后端实现][java-vue]

### 2、如何使用原生的picker年月日 时分秒=共同选择 ###

思路：加一起就行了

#### 效果图 ####

![在这里插入图片描述][eb8433da8a9445a39fd28f4751ee2e12.png_pic_center]

#### 完整代码 ####

##### index.wxml #####

<view class="container">
      <view class="tui-picker-name">日期时间选择器（精确到秒）</view>
      <picker mode="multiSelector" value="{
        {dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{
        {dateTimeArray}}">
        <view class="tui-picker-detail">
          选择日期时间: {
        {
        dateTimeArray[0][dateTime[0]]}}-{
        {
        dateTimeArray[1][dateTime[1]]}}-{
        {
        dateTimeArray[2][dateTime[2]]}} {
        {
        dateTimeArray[3][dateTime[3]]}}:{
        {
        dateTimeArray[4][dateTime[4]]}}:{
        {
        dateTimeArray[5][dateTime[5]]}}
        </view>
      </picker>
    </view>

##### index.js #####

##### dateTimePicker.js #####

![在这里插入图片描述][3bf47eb4b4ed4da788f8100eea284dac.jpeg_pic_center]

> 各位看官》创作不易，点个赞！！！  
> 诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

[232ba74c8a374f8a8e2b96341e971f46.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e745bac5f4eb4d4f8b0d0e427469632b.png
[cea355abb4344fb1b4c16e5f9b42728e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6076abcee10b4006887e35f922cf46b4.png
[1a05b81c2c224db8907e45617975a5d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7a4f5ea98e5847d1baa0b4a317c36c72.png
[9e9fabf3ed3d469fa0f005231daeab27.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/acd3cb9299b1487c88bc31966af3dd50.png
[Link 1]: https://blog.csdn.net/SoulNone/article/details/126317657
[java]: https://blog.csdn.net/SoulNone/article/details/126317291
[java-vue]: https://blog.csdn.net/SoulNone/article/details/126317092
[eb8433da8a9445a39fd28f4751ee2e12.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cb25f436295c458f82dd5b1cda112332.png
[3bf47eb4b4ed4da788f8100eea284dac.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4929de22003c48eb962660255613ac71.jpeg