微信小程序实现时间选择

第微信小程序实现时间选择本文实例为大家分享了微信小程序实现时间选择的具体代码，供大家参考，具体内容如下

xml:

view

pickermode="date"value="{{dateValue}}"bindchange="datePickerBindchange"

view/view

view

text{{dateValue}}/text

imagesrc="/pages/images/turn_down.png"/image

/view

/picker

text至/text

pickermode="date"value="{{dateValue}}"bindchange="datePickerBindchange"

view/view

view

text{{dateValue}}/text

imagesrc="/pages/images/turn_down.png"/image

/view

/picker

/view

view/view

css:

.day-check{

width:100%;

height:30px;

display:flex;

flex-direction:row;

justify-content:center;

border-bottom:1pxsolidrgb(212,212,212);

.picker_color{

width:50%;

height:30px;

line-height:30px;

.turn_down_view{

width:100%;

height:30px;

display:flex;

flex-direction:row;

justify-content:center;

.picker_text{

width:50%;

height:30px;

line-height:30px;

font-size:30rpx;

text-align:center;

.img_down{

width:20px;

height:20px;

margin-top:5px;

.text_check{

width:6%;

height:30px;

line-height:30px;

font-size:30rpx;

text-align:center;

.order_query_item:active{

background-color:rgb(223,11,11);

}

js:

varanimation

//时间

constdate=newDate()

constyears=[]

constmonths=[]

constdays=[]

for(leti=1990;i=date.getFullYear();i++){

years.push(i)

for(leti=1;i=12;i++){

vark=i;

if(0=ii=9){

k="0"+(i);

}else{

k=(i);

months.push(k)

for(leti=1;i=31;i++){

vark=i;

if(0=ii=9){

k="0"+(i);

}else{

k=(i);

days.push(k)

Page({

/**

*页面的初始数据

*/

data:{

currentIndex:0,

dateValue:'选择时间',

datePickerBindchange:function(e){

this.setData({

dateValue:e.detail.value

})

pickChange:function(e){

this.setData({

index:e.detail.value

});

/**

*生命周期函数--监听页面加载

*/

onLoad:function(options){

/**

*生命周期函数--监听页面初次渲染完成

*/

onReady:function(){

/**

*生命周期函数--监听页面显示

*/

onShow:function(){

/**

*生命周期函数--监听页面隐藏

*/

onHide:function(){

/**

*生命周期函数--监听页面卸载

*/

onUnload:function(){

/**

*页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh:function(){

/**

*页面上拉触底事件的处理函数

*/

onReachBot