小程序picker日历

标签：view   spl   image   art   psi   ext   images   name   comm   

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;
            }
        }
    }
}

小程序picker日历

标签：view   spl   image   art   psi   ext   images   name   comm   

原文地址：https://www.cnblogs.com/jiqing9006/p/12918308.html