当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序日历/日期选择插件使用方法详解

微信小程序日历/日期选择插件使用方法详解

2019年01月07日  | 移动技术网IT编程  | 我要评论

微信小程序日历选择器插件点击日历日期可以获取到年月日，具体内容如下

wxml

<view class="canlendarbgview">
 <view class="canlendarview">
  <view class="canlendartopview">
   <view class="leftbgview" bindtap="handlecalendar" data-handle="prev">
    <view class="leftview">《</view>
   </view>
   <view class="centerview">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
   <view class="rightbgview" bindtap="handlecalendar" data-handle="next">
    <view class="rightview">》</view>
   </view>
  </view>
  <view class="weekbgview">
   <view class="weekview" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
  </view>
  <view class="datebgview">
   <view wx:if="{{hasemptygrid}}" class="dateemptyview" wx:for="{{empytgrids}}" wx:key="{{index}}" data-idx="{{index}}">
   </view>
   <view class="dateview" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateselectaction">
    <view class="datesview {{index == todayindex ? 'dateselectview' : ''}}">{{item}}</view>
   </view>
  </view>
 </view>
 <view>点击日期选择</view>
</view>

js

//index.js
//获取应用实例
page({
 data: {
  hasemptygrid: false,
  cur_year: '',
  cur_month: '',
 },
 onload(options) {
  this.setnowdate();
 },
 
 dateselectaction: function (e) {
  var cur_day = e.currenttarget.dataset.idx;
  this.setdata({
   todayindex: cur_day
  })
  console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
 },
 
 setnowdate: function () {
  const date = new date();
  const cur_year = date.getfullyear();
  const cur_month = date.getmonth() + 1;
  const todayindex = date.getdate() - 1;
  console.log(`日期：${todayindex}`)
  const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  this.calculateemptygrids(cur_year, cur_month);
  this.calculatedays(cur_year, cur_month);
  this.setdata({
   cur_year: cur_year,
   cur_month: cur_month,
   weeks_ch,
   todayindex,
  })
 },
 
 getthismonthdays(year, month) {
  return new date(year, month, 0).getdate();
 },
 getfirstdayofweek(year, month) {
  return new date(date.utc(year, month - 1, 1)).getday();
 },
 calculateemptygrids(year, month) {
  const firstdayofweek = this.getfirstdayofweek(year, month);
  let empytgrids = [];
  if (firstdayofweek > 0) {
   for (let i = 0; i < firstdayofweek; i++) {
    empytgrids.push(i);
   }
   this.setdata({
    hasemptygrid: true,
    empytgrids
   });
  } else {
   this.setdata({
    hasemptygrid: false,
    empytgrids: []
   });
  }
 },
 calculatedays(year, month) {
  let days = [];
 
  const thismonthdays = this.getthismonthdays(year, month);
 
  for (let i = 1; i <= thismonthdays; i++) {
   days.push(i);
  }
 
  this.setdata({
   days
  });
 },
 handlecalendar(e) {
  const handle = e.currenttarget.dataset.handle;
  const cur_year = this.data.cur_year;
  const cur_month = this.data.cur_month;
  if (handle === 'prev') {
   let newmonth = cur_month - 1;
   let newyear = cur_year;
   if (newmonth < 1) {
    newyear = cur_year - 1;
    newmonth = 12;
   }
 
   this.calculatedays(newyear, newmonth);
   this.calculateemptygrids(newyear, newmonth);
 
   this.setdata({
    cur_year: newyear,
    cur_month: newmonth
   })
 
  } else {
   let newmonth = cur_month + 1;
   let newyear = cur_year;
   if (newmonth > 12) {
    newyear = cur_year + 1;
    newmonth = 1;
   }
 
   this.calculatedays(newyear, newmonth);
   this.calculateemptygrids(newyear, newmonth);
 
   this.setdata({
    cur_year: newyear,
    cur_month: newmonth
   })
  }
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网