el-date-picker只能选择当前时间及之前的时间_el-date-picker当前时间以前_RAY_CHEN.的博客

相关文章推荐

追风的小虾米 · 吴健· 3 月前 ·

空虚的西瓜 · 广汽菲克倒闭了，合资车戏路难长久？从专利看他 ...· 3 月前 ·

有腹肌的大象 · 第37届中国高等学校电力系统及其自动化专业学 ...· 5 月前 ·

呐喊的竹笋 · 司马迁笔下的吴国，竟是周朝第一诸侯！吴国到底 ...· 5 月前 ·

怕老婆的鸵鸟 · 张欣| 个人信息| 西安电子科技大学个人主页· 9 月前 ·

时间选择器只能选择当前及之前的时间，之后时间禁选；

 <el-date-picker v-model="ruleForm.birthday" size="mini" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
          </el-date-picker>

 pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
                    场景：时间选择器只能选择当前及之前的时间，之后时间禁选； &lt;el-date-picker v-model="ruleForm.birthday" size="mini" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"&gt;          &lt;/el-date-picker&gt; pickerOptions
				如图，虽然11号不能选择，但是点击事件选择框，则可以选择一整天的时间。
显然，这样用户体验十分不好，最理想的应该是用户可以选择11号，点开时间选择框`只能选择当前之后的时分秒`。
在网上找了很多方案，发现全是旧版elementUI的，好像elementPLUS把selectableRange已经去掉了，而文档中也没有明确指出限制时分秒的属性，
当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求，比如：
新建一个活动，需要定义活动的时间范围；
因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成；
网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！
2.问题分析
时间信息没有回填，首先要检查，后台数据返回情况以及页面上字段信息是否有差异等细节；
如果没有以上的情况，那就是我碰到的这种情况了，
后端数据返回没有差异，而且页面字段也没有错，其他的信息也正常回填，唯独时间不回填，同时也伴随一次回填后续不回填等诸多情况。总结来说就是：页面与数据
				在使用 el-date-picker 组件时，可以通过设置 "type" 属性来控制日期选择的类型。如果要限制只能选择一天，可以将 "type" 设置为 "date"。例如：
<el-date-picker v-model="dateValue" type="date"></el-date-picker>
这样，用户只能选择日期而不能选择时间。