小程序picker日历

技术图片

html

<picker class="date-picker" mode="date" value="" start="1949-10-01" bindchange="bindDateChange"> <view class="birthday"> <input name="birthday" type="text" value="{{birthday}}" class="info_input" placeholder-class="info_input" placeholder="请选择您的生日" /> <view class="info_more"> <image class="more" src="/images/common/more_gray.png" /> </view> </view></picker>

css

.date-picker { .birthday { width: 520rpx; height: 100rpx; display: flex; line-height: 100rpx; margin-left: 10rpx; .info_input { font-size: 32rpx; height: 100%; font-weight: 500; color: rgba(170, 170, 170, 1); line-height: 100rpx; overflow: hidden; text-overflow: ellipsis; width: 540rpx; } .info_more { display: flex; align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ .more { width: 14rpx; height: 24rpx; } } }}

相关文章