微信小程序--详情实现日期选择期(年月日)

案例:
在这里插入图片描述
html:

  <view class="huanhang">
      <view class="fontBold">发起时间:</view>
      <view class="fontBold">   <picker class="getBusTime" mode="date" data-namesa="staDate" model:value="{{staDate?staDate:''}}" start="2020-01-01" end="2040-01-01" bindchange="bindFormDateChange">
            <view style="color: #000;" class="getBusTimeRight fontSize34">{{staDate}}</view>
          </picker></view>
    </view>

js:

data:{
		staDate:"选择时间",
},
	bindFormDateChange: function (e) {
	  this.setData({
	    [e.target.dataset.namesa]: e.detail.value
	  })
	},
  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在微信小程序的picker组件中同时显示年月日时分秒,可以使用picker-view组件来完成。picker-view组件可以自由定义滚轮的数量和每个滚轮的选项,因此可以用来实现显示年月日时分秒的需求。 具体实现步骤如下: 1. 在wxml文件中添加picker-view组件,并定义每个滚轮的内容和样式。 ```html <view class="picker"> <picker-view class="picker-view" value="{{dateIndex}}" bindchange="bindDateChange"> <picker-view-column> <view class="picker-item" wx:for="{{years}}" wx:key="">{{item}}年</view> </picker-view-column> <picker-view-column> <view class="picker-item" wx:for="{{months}}" wx:key="">{{item}}月</view> </picker-view-column> <picker-view-column> <view class="picker-item" wx:for="{{days}}" wx:key="">{{item}}日</view> </picker-view-column> <picker-view-column> <view class="picker-item" wx:for="{{hours}}" wx:key="">{{item}}时</view> </picker-view-column> <picker-view-column> <view class="picker-item" wx:for="{{minutes}}" wx:key="">{{item}}分</view> </picker-view-column> <picker-view-column> <view class="picker-item" wx:for="{{seconds}}" wx:key="">{{item}}秒</view> </picker-view-column> </picker-view> </view> ``` 2. 在js文件中定义每个滚轮的选项以及初始化日期和时间。 ```javascript Page({ data: { years: [], months: [], days: [], hours: [], minutes: [], seconds: [], date: '', dateIndex: [0, 0, 0, 0, 0, 0] }, onLoad: function () { var years = [], months = [], days = [], hours = [], minutes = [], seconds = []; for (var i = 1990; i <= 2100; i++) { years.push(i); } for (var i = 1; i <= 12; i++) { months.push(i); } for (var i = 1; i <= 31; i++) { days.push(i); } for (var i = 0; i <= 23; i++) { hours.push(i); } for (var i = 0; i <= 59; i++) { minutes.push(i); seconds.push(i); } this.setData({ years: years, months: months, days: days, hours: hours, minutes: minutes, seconds: seconds }); }, bindDateChange: function(e) { var val = e.detail.value; var dateIndex = this.data.dateIndex; dateIndex[0] = val[0]; dateIndex[1] = val[1]; dateIndex[2] = val[2]; dateIndex[3] = val[3]; dateIndex[4] = val[4]; dateIndex[5] = val[5]; this.setData({ dateIndex: dateIndex }); } }) ``` 3. 在样式文件中定义picker-view的样式。 ```css .picker { height: 200rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; } .picker-view { width: 100%; height: 200rpx; display: flex; align-items: center; justify-content: center; } .picker-item { line-height: 50rpx; text-align: center; font-size: 28rpx; color: #333; height: 50rpx; } ``` 这样就可以在微信小程序实现同时显示年月日时分秒的picker组件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值