小程序项目时间选择器用法

项目需求是要实现这种形式, 但是相信大家都试了各种插件,都不太合适,uView框架也不能满足自己的需要;

推荐使用:uview-ui-plus

基本上小程序遇到的单选多选日期省市区都可以完美的实现,可以通过插件市场安装使用

但是要实现ui给的原型图还需要做一下调整弹性布局给两个选择器

 <view class="time">
      <!-- w-datetime-picker为表单组件，结合u--form表单使用 -->
      <u--form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="form">
        <view class="timebox">
          <u-form-item>
            <w-datetime-picker v-model="form.start" placeholder="请选择日期" mode="date" inputAlign="left" />
          </u-form-item>
          至
          <u-form-item>
            <w-datetime-picker v-model="form.end" placeholder="请选择日期" mode="date" inputAlign="left" :format="dateFormat"/>
          </u-form-item>
        </view>
      </u--form>
    </view>

可以给结束时间加上一个默认当前时间

 form: {
          start: "",
          end: new Date().toISOString().substr(0, 10),
        },




 computed: {
      dateFormat() {
        return 'YYYY-MM-DD';
      }
    },


<u-form-item>
            <w-datetime-picker v-model="form.end" placeholder="请选择日期" mode="date" inputAlign="left" :format="dateFormat"/>

</u-form-item>

最终效果图: