When we use ElementUI to build form pages, we often need to use compound input boxes, which can be front or rear elements, typically labels or buttons, as explanatory text for the input box.

For example:

The Input component provides four slots: prefix, suffix, prepend, and Append. Here, we can specify the prefix text in the Input by Slot.

<el-input placeholder="" v-model=" formdata.deviceInfo "> <template slot="prepend"> </template> </el-input>Copy the code

But the DatePicker component doesn’t provide a Slot for us to add the same explanatory text. With placeholder, we don’t know what the field does when the date is selected.

To achieve the same UI effect as the Input component, it seems that you have to work on your own. (It’s a little confusing why the date component doesn’t officially provide front and rear Slot insertion. This is a common scenario.)

The UI implementation is similar to the combination of button and Datepicker components. Let’s write out the page tag code to see what it looks like

<div class="timepick-width-prepend"> <el-button type="default" class="prepend-text"> </el-button> <el-date-picker V-model =" formData.planproductTime "type="date" placeholder=" yyyY-mm-dd "></el date-picker> </div>Copy the code

Without adding additional styles is the following, which seems to be far from the final result we want.

First we use flex layouts on the outer divs so that they are placed horizontally and centered vertically. Add a background color to the button. Remove the hover effect of button.

This is pretty close to where we want it to be. Finally, to optimize the details, reset the top and bottom corners of the button component to 0 on the right side, and reset the top and bottom corners of the Datepicker to 0 on the left side.

.timepick-width-prepend { display: flex; align-items: center; .prepend-text { background: #F5F7FA; color: #909399; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; cursor: default; :focus, :hover { border-color: #DCDFE6! important; } } .prepend-text:focus, .prepend-text:hover { border-color: #DCDFE6! important; } .el-input__inner { border-top-left-radius: 0! important; border-bottom-left-radius: 0! important; }}Copy the code

This is the end of the implementation of the datepicker component to add a prefix. We can also encapsulate it as a component for later use.