小程序项目时间选择器用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序项目时间选择器用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序时间选择器,小程序,前端,微信小程序

项目需求是要实现这种形式, 但是相信大家都试了各种插件,都不太合适,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>

最终效果图:

小程序时间选择器,小程序,前端,微信小程序