微信小程序之日历选择时间（自定义组件）

组件文件（time-danxuan）

1、timedan.js

Component({
  properties: {
    start: {
      type: String,
      value: '',
      observer: function (newVal) {
        if (typeof (newVal) == 'string' && newVal.length > 0) {
          var t = new Date(newVal)
          if (!isNaN(t.getTime())) {
            var y = t.getFullYear(),
              m = t.getMonth(),
              d = t.getDate()
            this.setData({
              startDate: [y, m, d]
            })
          }
        }
      }
    },
    end: {
      type: String,
      value: '',
      observer: function (newVal) {
        if (typeof (newVal) == 'string' && newVal.length > 0) {
          var t = new Date(newVal)
          if (!isNaN(t.getTime())) {
            var y = t.getFullYear(),
              m = t.getMonth(),
              d = t.getDate()
            this.setData({
              endDate: [y, m, d]
            })
          }
        }
      }
    },
    value: {
      type: String,
      value: '',
      observer: function (newVal) {
        if (typeof (newVal) == 'string' && newVal.length > 0) {
          var t = new Date(newVal)
          if (!isNaN(t.getTime())) {
            var y = t.getFullYear(),
              m = t.getMonth(),
              d = t.getDate()
            this.setData({
              valueDate: [y, m, d],
              year: y,
              month: m
            })
          }
        }
      }
    },
    timeid:Number
  },
  data: {
    show: true,
    startDate: [],
    endDate: [],
    valueDate: [],
    year: new Date().getFullYear(),
    month: new Date().getMonth(),
    days: []
  },
  methods: {
    loadData: function () {
      var that = this,
        data = that.data,
        year = data.year,
        month = data.month,
        valueDate = data.valueDate,
        startDate = data.startDate,
        endDate = data.endDate,
        date = new Date(year, month, 1),
        week = date.getDay(),
        days = [],
        last = new Date(year, (month + 1), 0),
        max = last.getDate(),
        lastWeek = last.getDay()
      if (week > 0) {
        for (var i = 0; i < week; i++) {
          days.push({
            day: 0
          })
        }
      }
      if (valueDate[0]) var currentTime = new Date(valueDate[0], valueDate[1], valueDate[2]).getTime()
      if (startDate[0]) var startTime = new Date(startDate[0], startDate[1], startDate[2]).getTime()
      if (endDate[0]) var endTime = new Date(endDate[0], endDate[1], endDate[2]).getTime()
      for (var i = 1; i <= max; i++) {
        var current = false,
          disabled = false,
          d = new Date(year, month, i),
          t = d.getTime()
        if (currentTime && currentTime == t) current = true
        if (startTime && startTime > t) disabled = true
        if (endTime && endTime < t) disabled = true
        days.push({
          day: i,
          current: current,
          disabled: disabled
        })
      }
      if (lastWeek != 6) {
        for (var i = 0, l = (6 - lastWeek); i < l; i++) {
          days.push({
            day: 0
          })
        }
      }
      that.setData({
        days: days
      })
    },
    prevMonth: function () {
      var that = this,
        data = that.data,
        year = data.year,
        month = data.month,
        date = new Date(year, (month - 1), 1)
      that.setData({
        year: date.getFullYear(),
        month: date.getMonth()
      }, () => {
        that.loadData()
      })
    },
    nextMonth: function () {
      var that = this,
        data = that.data,
        year = data.year,
        month = data.month,
        date = new Date(year, (month + 1), 1)
      that.setData({
        year: date.getFullYear(),
        month: date.getMonth()
      }, () => {
        that.loadData()
      })
    },
    changeMonth: function (e) {
      var that = this,
        value = e.detail.value,
        date = new Date(value + '-01')
      that.setData({
        year: date.getFullYear(),
        month: date.getMonth()
      }, () => {
        that.loadData()
      })
    },
    changeDate: function (e) {
      var that = this,
        data = that.data,
        year = data.year,
        month = data.month,
        days = data.days,
        index = e.currentTarget.dataset.i,
        value = {}
      if (days[index] && days[index].day > 0 && !days[index].disabled) {
        if (!days[index].current) {
          for (var i = 0, l = days.length; i < l; i++) {
            if (days[i].current) {
              days[i].current = false
              break
            }
          }
        }
        days[index].current = true
        that.setData({
          days: days
        })
      that.closeCalendar()
        value.year = year
        month += 1
        value.month = month
        value.day = days[index].day
        value.date =[{}]
        var timeid = this.data.timeid; //获取传入数据
        value.date[timeid] = year + '-' + (month < 10 ? '0' + month : month) + '-' + (days[index].day < 10 ? '0' + days[index].day : days[index].day)
        that.triggerEvent('doChange', value)
      }
    },
    closeCalendar: function () {
      var that = this
      that.setData({
        show: false
      })
      setTimeout(function () {
        that.triggerEvent('doClose')
      }, 400)
    }
  },
  attached: function () {
    this.loadData()
  }
})

2、timedan.wxml

<view bindtap="closeCalendar" class="mask {{show?'mask_show':'mask_hide'}}"></view>
<view class="popup {{show?'popup_show':'popup_hide'}}">
	<view class="tishi" bindtap="closeCalendar">
		<text wx:if="{{timeid==0}}">请选择开始时间</text>
		<text wx:if="{{timeid==1}}">请选择结束时间</text>
		<image src="/pages/images/chahei.png"></image>
	</view>
	<view class="popup_head">
		<!-- <view bindtap="closeCalendar" class="popup_cancel">取消</view> -->
		<view class="popup_month">
			<view bindtap="prevMonth" class="popup_prev"></view>
			<picker class="yanse" mode="date" bindchange="changeMonth" fields="month" value="{{year}}-{{(month+1)}}"
				start="{{startDate[0]?startDate[0]+'-'+(startDate[1]+1)+'-1':''}}"
				end="{{endDate[0]?endDate[0]+'-'+(endDate[1]+1)+'-1':''}}">
				<view class="popup_month_picker yanse">{{year}}年{{(month+1)}}月</view>
			</picker>
			<view bindtap="nextMonth" class="popup_next"></view>
		</view>
	</view>
	<view class="popup_body">
		<view class="cal">
			<view class="cal_week">
				<view class="cal_week_text">日</view>
				<view class="cal_week_text">一</view>
				<view class="cal_week_text">二</view>
				<view class="cal_week_text">三</view>
				<view class="cal_week_text">四</view>
				<view class="cal_week_text">五</view>
				<view class="cal_week_text">六</view>
			</view>
			<view class="cal_days">
				<view wx:for="{{days}}" wx:key="index" bindtap="changeDate" data-i="{{index}}"
					class="cal_day {{item.current?'current':''}} {{item.disabled?'disabled':''}}">{{item.day>0?item.day:''}}
				</view>
			</view>
		</view>
	</view>
</view>

3、timedan.wxss

.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9000;
}

.mask_show {
  animation: mask_show ease 0.3s forwards;
}

@keyframes mask_show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.mask_hide {
  animation: mask_hide ease 0.3s forwards;
}

@keyframes mask_hide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9001;
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0 20rpx;
  border-radius: 10rpx 10rpx 0 0 ;
}

.popup_show {
  animation: popup_show ease 0.3s forwards;
}

@keyframes popup_show {
  0% {
    transform: translate(0, 100%);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.popup_hide {
  animation: popup_hide ease 0.3s forwards;
}

@keyframes popup_hide {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  100% {
    transform: translate(0, 100%);
    opacity: 0;
  }
}

.popup_head {
  border-top: 2rpx solid #f6f6f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  font-size: 34rpx;
}

.popup_cancel {
  color: #888;
}

.popup_month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.popup_prev,
.popup_next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rpx;
}

.popup_prev::before,
.popup_next::before {
  display: block;
  content: '';
  box-sizing: border-box;
  box-sizing: border-box;
  width: 12rpx;
  height: 24rpx;
  border-top: 12rpx solid #fff;
  border-bottom: 12rpx solid #fff;
}

.popup_prev {
  margin-right: 20rpx;
  width: 50rpx;
  height: 50rpx;
}

.popup_prev::before {
  border-right: 12rpx solid #5028A0;
}

.popup_next {
  margin-left: 20rpx;
  width: 50rpx;
  height: 50rpx;
}

.popup_next::before {
  border-left: 12rpx solid #5028A0;
}

.popup_month_picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yanse{
  color: #5028A0;
}
.popup_month_picker::after {
  margin-left: 8rpx;
  display: block;
  content: '';
  box-sizing: border-box;
  width: 24rpx;
  height: 12rpx;
  border-top: 12rpx solid #5028A0;
  border-left: 12rpx solid #fff;
  border-right: 12rpx solid #fff;
}

.popup_body {
  border-top: 2rpx solid #f6f6f6;
  /* padding-top: 16rpx; */
  padding-bottom: 16rpx;
}

.cal {
  margin: 0 auto;
}

.cal_week {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cal_week_text {
  width: 104rpx;
  padding: 10rpx 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.cal_days {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 30rpx;
}

.cal_day {
  width:14.28%;
  border-top: 2rpx solid #eee;
  padding: 16rpx 0;
  text-align: center;
}

.cal_days .current {
  background: #5028A0;
  color: #fff;
}

.cal_days .disabled {
  color: #ccc;
}

.tishi {
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
}

.tishi text {
  font-size: 32rpx;
  color: #212121;
  font-weight: 600;
}

.tishi image {
  width: 35rpx;
  height: 35rpx;
}

二、引用
以首页为例
1，index.js

var app = getApp();
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		timexuanz: []
	},

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

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

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		var that = this;
		var timestamp = Date.parse(new Date());
		var date = new Date(timestamp);
		//获取年份  
		var Y = date.getFullYear();
		//获取月份  
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
		//获取当日日期 
		var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
		var xianzhikaishitime = Y + '-' + M + '-' + D;
		//数据获取
		that.setData({
			xianzhikaishitime: xianzhikaishitime,
		})
	},

	// 日期选择
	showCalendar: function (e) {
		var that = this;
		var biankuang_color = e.currentTarget.dataset.name;
		var timeid = e.currentTarget.dataset.idt;
		var timexuanz = that.data.timexuanz;
		var date_lanse = timexuanz[timeid];
		that.setData({
			showCalendar: true,
			timeid: timeid,
			date_lanse: date_lanse,
			biankuang_color: biankuang_color,
		})
	},
	//选择日期
	_doChange: function (e) {
		var that = this;
		var timeid = that.data.timeid;
		var timexuanz = that.data.timexuanz;
		timexuanz[timeid] = e.detail.date[timeid]
		that.setData({
			timexuanz: timexuanz
		})
	},
	//关闭选择器
	_doClose: function () {
		var that = this;
		that.setData({
			showCalendar: false
		})
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {

	},

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

	},

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

	},

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

	},
	//util统一跳转
	onUrls: function (event) {
		util.onUrls(event);
	},


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

	// }
})

2、index.json

{
  "navigationBarTitleText": " ",
  "enablePullDownRefresh": false,
  "backgroundTextStyle": "dark",
  "usingComponents": {
    "timedan": "/components/time-danxuan/timedan"
  }
}

3、index.wxml

//为了防止冒泡，data-idt的值请务必保证唯一性，
<input bindtap="showCalendar" data-idt="0" value="{{timexuanz[0]}}" disabled="disabled"/>
<input bindtap="showCalendar" data-idt="1" value="{{timexuanz[1]}}" disabled="disabled"/>
//日期选择
<timedan wx:if="{{showCalendar}}" timeid="{{timeid}}" start="{{xianzhikaishitime}}" end="" value="{{date_lanse}}" bind:doChange="_doChange" bind:doClose="_doClose"></timedan>