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

/* 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"

}

总结

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

以上是 微信小程序日期选择器实例代码 的全部内容, 来源链接: utcz.com/z/360615.html

回到顶部