微信小程序时间选择器的实现

25号底片~

已于 2022-10-19 15:23:01 修改

阅读量536

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序 javascript 前端

于 2022-10-19 12:19:01 首次发布

本文链接：https://blog.csdn.net/weixin_46001736/article/details/127405339

版权

微信小程序专栏收录该内容

40 篇文章 0 订阅

订阅专栏

样式：

wxml

<view class="pop2">
    <view class="pop2_title">
      <text style="color:red;">*</text>
      <text>生效日期</text>
    </view>
    <view class="center">
      <picker mode="date" value="{{startdate}}" bindchange="bindDateChange" name="effective_date" class="picker">
        <view class="pickerall">
          <view class="pop2_input">
            <text class="{{startdate=='开始日期'?'text-style1':'text-style2'}}">{{startdate}}</text>
          </view>
        </view>
      </picker>
    </view>
  </view>

wxss

.pop2 {
  background-color: white;
  width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 5%;
}
.pop2_title {
  margin-left: 5%;
  margin-bottom: 3%;
}
.pop2_input{
  padding:2% 0 2% 5%;
}
.pickerall{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.picker {
  width: 85%;
  border: 1px solid #EDEDEE;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 3%;
}

Page({
  data: {
    startdate: '请选择', //默认初始值
  },
   //选择日期
   bindDateChange(e) {
    let that = this;
    console.log(e.detail.value)
    that.setData({
      startdate: e.detail.value, //默认开始日期
    })
  },
})