请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

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

2023-07-13

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

最终效果图:

 

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部