小程序日期日历选择组件及调用

最新推荐文章于 2024-08-09 07:59:54 发布

大新软件技术部

最新推荐文章于 2024-08-09 07:59:54 发布

阅读量361

点赞数

分类专栏：微信

本文链接：https://blog.csdn.net/yangyifan0/article/details/115291657

版权

本文介绍了如何在小程序中创建一个名为selcalendar的自定义日期日历选择组件。详细讲解了组件的js、wxml和wxss代码实现，并阐述了在实际页面中调用该组件的方法。

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

新建小程序组件 selcalendar

js代码：

// pages/components/selcalendar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //星期数组
    weekText: {
      type: Array,
      value: ['日', '一', '二', '三', '四', '五', '六']
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showstate:false,
    selspace:1,/*0 单选 1 选择时间段*/
    //当月格子
    thisMonthDays: [],
    //上月格子
    empytGridsBefore: [],
    //下月格子
    empytGridsAfter: [],

    allgrid:[],

    selmonth:'',
    year: 2020,
    month: 1,
    
    datestart:'',
    dateend:'',
    selflag:0 /* 0 未选择 ，1 选择开始 2 选择结束 */
  },

  /**
   * 组件的方法列表
   */
  methods: {
     /*
     selspace:0 单选 1 选择日期段
     */
    funinit:function(selspace){
      this.setData({selspace:selspace,selflag:0,datestart:'',dateend:''});
        this.today();
        //this.display();
    },

    /*选择时间段*/
    selday:function(e){
      var index = e.currentTarget.dataset.index;

      if(this.data.selspace == 0){
        /*选择日期*/
        this.setData({
          selflag:1,
          datestart:this.data.allgrid[index].rq,
          dateend:this.data.allgrid[index].rq
        });

        return;
      }

      /*选择日期段*/
      var selflag = this.data.selflag;
      if(selflag == 2){
        selflag = 0;
        this.setData({
          datestart:'',
          dateend:''
        })
      }

      

      if(selflag ==0){
        this.setData({
          selflag:1,
          datestart:this.data.allgrid[index].rq
        })
      }
      else if(selflag ==1){
        var datestart = this.data.datestart;
        var dateend = this.data.allgrid[index].rq;
        var tmprq = dateend;

        if(datestart > dateend){
          dateend = datestart;
          datestart = tmprq;
        }

        this.setData({
          selflag:2,
          datestart:datestart,
          dateend:dateend
        })
      }

    },
    funhide:function(){