微信小程序日期选择器实例代码


            





/* JS代码部分 */

 3 const date = new Date()

const years = []

const months = []

const days = []

const hours = []

const minutes = []

var thisMon = date.getMonth();

var thisDay = date.getDate();

for (let i = 2017; i <= date.getFullYear() + 1; i++) {

 years.push(i)

}

for (let i = date.getMonth(); i <= 11; i++) {

 var k = i;

 if (0 <= i && i < 9) {

  k = "0" + (i + 1);

 } else {

  k = (i + 1);

 }

 months.push(k)

}

if (0 <= thisMon && thisMon < 9) {

 thisMon = "0" + (thisMon + 1);

} else {

 thisMon = (thisMon + 1);

}

if (0 <= thisDay && thisDay < 10) {

 thisDay = "0" + thisDay;

}

var totalDay = mGetDate(date.getFullYear(), thisMon);

for (let i = 1; i <= 31; i++) {

 var k = i;

 if (0 <= i && i < 10) {

  k = "0" + i

 }

 days.push(k)

}

for (let i = 0; i <= 23; i++) {

 var k = i;

 if (0 <= i && i < 10) {

  k = "0" + i

 }

 hours.push(k)

}

for (let i = 0; i <= 59; i++) {

 var k = i;

 if (0 <= i && i < 10) {

  k = "0" + i

 }

 minutes.push(k)

}

function mGetDate(year, month) {

 var d = new Date(year, month, 0);

 return d.getDate();

}

Page({

 data: {

  years: years,

  year: date.getFullYear(),

  months: months,

  month: thisMon,

  days: days,

  day: thisDay,

  value: [1, thisMon - 1, thisDay - 1, 0, 0],

  hours: hours,

  hour: "00",

  minutes: minutes,

  minute: "00",

 },

 bindChange: function (e) {

  const val = e.detail.value

  this.setData({

   year: this.data.years[val[0]],

   month: this.data.months[val[1]],

   day: this.data.days[val[2]],

   hour: this.data.hours[val[3]],

   minute: this.data.minutes[val[4]],

  })

  var totalDay = mGetDate(this.data.year, this.data.month);

  var changeDate = [];

  for (let i = 1; i <= totalDay; i++) {

   var k = i;

   if (0 <= i && i < 10) {

    k = "0" + i

   }

   changeDate.push(k)

  }

  this.setData({

   days: changeDate

  })

 },

})



/* css代码部分 */

.time-title{

 float:left;

 width:20%;

 text-align:center;

 color:#45BCE8;

}

.picker-text{

 text-align:center;

}

/*mask*/

.time_screens {

 width: 100%;

 position: fixed;

 bottom: 0;

 left: 0;

 z-index: 1000;

 opacity: 0.5;

 overflow: hidden;

}

/* html代码部分 */

 <view class="time_screens">

  <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}}

   <label style="float:left;margin-left:30px;">取消</label>

   <label style="float:right;margin-right:30px;">确定</label>

  </view>

  <view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">

  </view>

  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">

   <picker-view-column class="picker-text">

    <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>

   </picker-view-column>

   <picker-view-column class="picker-text">

    <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>

   </picker-view-column>

   <picker-view-column class="picker-text">

    <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>

   </picker-view-column>

  </picker-view>

 </view>

/* Json */

{

 "navigationBarTitleText": "XXXX"

}



总结

以上所述是小编给大家介绍的微信小程序日期选择器实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！