el-date-picker只能选择今天

13 篇文章 0 订阅
<el-form-item :prop="BeginDate" :rules="formContentRules.BeginDate" style="width:150px;float:left;margin-right:10px;">
                            <el-date-picker  v-model="BeginDate"
                                            type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="mini" style="width:150px;"
                                            :picker-options=pickerBeginOption>
                            </el-date-picker>
pickerBeginOption: {
                        disabledDate: (time) => {                                                        
                            //只能选择今天
                            return time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 || time.getTime() > new Date().getTime() ;
                        }
                    }

 

el-date-pickerElement UI库中的一个日期选择器组件,它提供了丰富的日期选择功能。然而,el-date-picker默认情况下并没有直接支持只能选择月末的功能。但是,我们可以通过自定义日期禁用函数来实现这个需求。 首先,我们需要在el-date-picker组件上添加一个属性`:disabled-date`,并将其绑定到一个自定义的日期禁用函数。在这个函数中,我们可以通过判断日期是否为月末来决定是否禁用该日期。 下面是一个示例代码: ```html <template> <el-date-picker v-model="date" type="date" :disabled-date="disabledDate" ></el-date-picker> </template> <script> export default { data() { return { date: null }; }, methods: { disabledDate(time) { const date = new Date(time); const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); return date.getDate() !== lastDayOfMonth; } } }; </script> ``` 在上述代码中,我们定义了一个`disabledDate`方法,该方法接收一个时间参数`time`,并返回一个布尔值来表示该日期是否应该被禁用。在方法内部,我们首先将时间转换为日期对象,并使用`getDate()`方法获取日期。然后,我们使用`new Date(date.getFullYear(), date.getMonth() + 1, 0)`来获取当前日期所在月份的最后一天的日期对象。最后,我们将当前日期日期与最后一天的日期进行比较,如果不相等,则禁用该日期。 这样,el-date-picker组件就只能选择月末了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值