The project requirement is to realize this form, but I believe that everyone has tried various plug-ins, but none of them are suitable, and the uView framework cannot meet their own needs;
Recommended use: uview-ui-plus
Basically, the single-select multi-select dates, provinces, and cities encountered by the applet can be perfectly realized, and can be installed and used through the plug-in market
But to realize the prototype map given by ui, you need to adjust the elastic layout to the two selectors
<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>You can add a default current time to the end time
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>Final renderings:
