微信小程序使用vant实现日历弹框

目录

1、效果图

2、代码部分

a、calendar.json文件

b、calendar.ts 文件

c、calendar.wxml文件

D、calendar.wxss文件

---

      在微信或者app开发过程中,经常会遇到时间选择的需求，当然这只是其中一个案例，不一定都适用，只是提供一种vant ui使用方式，更多的demo及相关文档，可以去vant 官网去查看。本案例是在已经引入vant UI 基础上开发的，没有引入vant 的，需要事先引入vant 框架。

1、效果图

  

2、代码部分

    a、calendar.json文件

    主要是vant 组件引用，由于我的是在分包中引用组件，故具体的路径需要具体分析修改，不能直接复制，因为可能会由于路径不对，导致打不开vant 组件。

{
  "usingComponents": {
    "van-calendar": "/miniprogram_npm/@vant/weapp/calendar/index",
    "van-cell": "/miniprogram_npm/@vant/weapp/cell/index"
  }
}

b、calendar.ts 文件

//index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dateString: "",
    show: false,
    max_data: "",
    min_data: "",
    date:""
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var timeStamp = new Date();//默认选中当天
    var titledt = this.formatDateS(timeStamp);

    let min_data = new Date(titledt).getTime();
    let max_data = min_data +(24 * 60 * 60 * 31*1000 );

    console.log("==ssssfsaaa=="+max_data+"==min_data=="+min_data)

    // console.log("==min_data====" + min_data)

    this.setData({
      min_data: min_data,
      max_data:max_data,
      date:titledt
    })
  },


  //转换为时间格式
  formatDateS(dates:any) {
    let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
    var date = new Date(dates);

    date.setDate(date.getDate());
    let weekDay = date.getDay();
    var weekDate = show_day[weekDay]

    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";
    var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
    var mm = ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
    var ss = ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return YY + MM + DD;
  },

  // 确认事件
  onConfirm(e){
    
   let min_data = new Date(e.detail)
   console.log("==min_data====" + JSON.stringify(this.formatDateS(e.detail)))

    this.setData({
      show: false,
      date:""+this.formatDateS(e.detail)
    })
  },

  //显示
  onDisplay: function () {
    this.setData({
      show: true
    })
  },

  // 关闭弹窗
  onClose() {
    this.setData({
      show: false
    })
  },


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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

c、calendar.wxml文件

<!--index.wxml-->
<van-cell title="时间选择" value="{{ date }}" bind:click="onDisplay" is-link/>
<van-calendar  class="calendar" type="single" poppable="{{ true }}" default-date="{{min_data}}" min-date="{{min_data}}" max-date="{{max_data}}" show="{{ show }}" bind:close="onClose" color="#06c7ae" show-title="{{false}}" bind:confirm="onConfirm" show-confirm="{{false}}" />

D、calendar.wxss文件

/**index.wxss**/
page{
  background-color: #f6f6f6;
}

/*时间选择*/
.van-cell {
  border-radius: 10rpx;
  margin: 20rpx;
  margin-right: 60rpx;
}

样式修改，可以通过van-cell对cell 进行样式修改。