RadioGroup里使用DatePicker的时候,日期选择器选择了开始日期时日期下拉选框会直接消失,选不了结束日期。

本文主要是介绍RadioGroup里使用DatePicker的时候,日期选择器选择了开始日期时日期下拉选框会直接消失,选不了结束日期。，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这个属于iview组件的问题,被RadioGroup包裹的多个Radio选项,默认每个Radio选项的click事件均是单击事件,所以像日期选择器这种需要点击多次来
选择开始或者结束时间的功能组件放在Radio选项里就会有冲突。

解决方案: Radio选项框里放置一个空的div,将DatePicker放在Radio外层实现相关布局和功能。

<FormItem label="有效期: "
                prop="interests">
        <RadioGroup v-model="formOther.interests"
                    @on-change="interestsRadioChange"
                    size="large">
          <Row class="radioRow datepickerRadio">
            <Radio label="1"
                   :disabled="isDetail">
              <span></span>
            </Radio>
            <span>
              <DatePicker class="search-value"
                          v-model="formOther.dateTime"
                          :disabled="isDetail || formOther.interests !== '1'"
                          :editable='false'
                          type="daterange"
                          placement="bottom-start"
                          format="yyyy-MM-dd HH:mm:ss"
                          @on-change="dateTimeChange"
                          placeholder="开始日期   至   结束日期"></DatePicker>
            </span>
          </Row>
          <Row class="radioRow">
            <Radio label="0"
                   :disabled="isDetail">
              <span class="radioText">领券当日起</span>
              <Input placeholder="请输入"
                     class="inputStyle"
                     :disabled="isDetail || formOther.interests !== '0'"
                     @on-blur="validInput('currentDay')"
                     v-filterinput="{reg:regExp.num}"
                     v-model="formOther.currentDay">
              </Input>
              <span class="radioText">天内可用</span>
            </Radio>
          </Row>
          <Row>
            <Radio label="2"
                   :disabled="isDetail">
              <span class="radioText">领券次日起</span>
              <Input placeholder="请输入"
                     class="inputStyle"
                     :disabled="isDetail || formOther.interests !== '2'"
                     @on-blur="validInput('nextDay')"
                     v-filterinput="{reg:regExp.num}"
                     v-model="formOther.nextDay">
              </Input>
              <span class="radioText">天内可用</span>
            </Radio>
          </Row>
        </RadioGroup>
      </FormItem>

这篇关于RadioGroup里使用DatePicker的时候,日期选择器选择了开始日期时日期下拉选框会直接消失,选不了结束日期。的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！