ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.1k stars 14.64k forks source link

[Bug Report] TimePicker range mode set name attributes error #21406

Open XaoflySho opened 2 years ago

XaoflySho commented 2 years ago

Element UI version

2.15.6

OS/Browsers version

Windows 10/Chrome 94.0.4606.81

Vue version

2.6.14

Reproduction Link

https://codepen.io/zlucy/pen/gOxLoBE

Steps to reproduce

<el-time-picker
    is-range
    name="picker"
    id="picker"
    v-model="value1"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>

为 time picker 添加 name 和 id 属性。 解析后,name 和 id 被拆分。

What is Expected?

<div class="el-date-editor el-range-editor el-input__inner el-date-editor--timerange" name="picker" id="picker"><i class="el-input__icon el-range__icon el-icon-time"></i><input autocomplete="off" placeholder="开始时间" name="p" class="el-range-input"><span class="el-range-separator">至</span><input autocomplete="off" placeholder="结束时间" name="i" class="el-range-input"><i class="el-input__icon el-range__close-icon"></i></div>

What is actually happening?

<div class="el-date-editor el-range-editor el-input__inner el-date-editor--timerange"><i class="el-input__icon el-range__icon el-icon-time"></i><input autocomplete="off" placeholder="开始时间" name="p" id="p" class="el-range-input"><span class="el-range-separator">至</span><input autocomplete="off" placeholder="结束时间" name="i" id="i" class="el-range-input"><i class="el-input__icon el-range__close-icon"></i></div>
element-bot commented 2 years ago

Translation of this issue:

Element UI version

2.15.6

OS/Browsers version

Windows 10/Chrome 94.0.4606.81

Vue version

2.6.14

Reproduction Link

https://codepen.io/zlucy/pen/gOxLoBE

Steps to reproduce

<el-time-picker

is-range name=\"picker\"

id=\"picker\" v-model=\"value1\"

Range separator = \"to\" Start placeholder = \"start time\"

End placeholder = \"end time\" Placeholder = \"select time range\" >

Add the name and ID attributes to the time picker.

After parsing, the name and ID are split.

What is Expected?

< div class = \"El date editor El range editor El input_inner El date editor -- timerange\" name = \"picker\" id = \"picker\" > < I class = \"El input_icon El range_icon El icon time\" > < / I > < input autocomplete = \"off\" placeholder = \"start time\" name = \"P\" class = \"El range input\" > < span class = \"El range separator\" > to < / span > < input autocomplete = \"off\" placeholder = \"end time\" name=\"i\" class=\"el-range-input\"><i class=\"el-inputicon el-rangeclose-icon\">

What is actually happening?

< div class = \"El date editor El range editor El input_inner El date editor -- timerange\" > < I class = \"El input_icon El range_icon El icon time\" > < / I > < input autocomplete = \"off\" placeholder = \"start time\" name = \"P\" id = \"P\" class = \"El range input\" > < span class = \"El range separator\" > to < / span > < input autocomplete = \"off\" placeholder = \"end time\" name = \"I\" id = \"I\" class=\"el-range-input\"><i class=\"el-inputicon el-rangeclose-icon\">