vue+elementUI 关于日期选择器的disabledDate问题

关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。 
HTML:给选择器加上:picker-options属性

//开始时间
<el-date-picker v-model="startDate"></el-date-picker>
//截止时间
<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>
  • 1
  • 2
  • 3
  • 4

DATA: 
我这里就简略写下关键的。

data() {
    return {
        startDate: null,
        endDate: null,
        endDateOpt: {
            disabledData: (time) => {
                return time.getTime() < this.startDate;
            }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

以上是单个选择框的,如果是daterange或datetimerange的话:

<el-date-picker v-model="value1" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>
  • 1
  • 2
  • 3
data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) => {
             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
         }
     }
   };
}
 
问题: 
 (html5)element UI 的datePicker 怎么限制输入的范围呢? 

描述:

1.element UI的datePicker 怎么确定日期的选择范围内,向后台的数据需要限制在某一段日期范围内,在element Ui 的日期范围内


解决方案1:

pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },

disabledDate: (time) => {
    let beginDateVal = this.addJobForm.beginDate;
    if (beginDateVal) {
        return time.getTime() < beginDateVal;
    }
}
解决方案2:

http://element.eleme.io/#/zh-...
http://jsfiddle.net/api/post/...

设置picker-options的disabledDate,返回true被禁用。
涉及到具体的项目,这种问题最好到GitHub上去问。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue ElementUI日期选择器是一个可用于选择日期的组件。根据需求,你想要实现默认选中近一个月的日期,并且只能选择今天到三年前的日期,今天以后的日期不可选。为了解决报400错误,你需要对日期进行格式化处理。 你可以通过设置日期选择器的默认值来实现默认选中近一个月的日期,可以使用moment.js库来方便地进行日期计算和格式化。具体的实现步骤如下: 1. 首先,安装moment.js库。使用npm命令进行安装: ``` npm install moment --save ``` 2. 在Vue组件中导入moment.js库: ```javascript import moment from "moment"; ``` 3. 在日期选择器的v-model绑定的数据中设置默认值。你可以使用moment.js库的方法来计算近一个月之前的日期,并将其作为v-model的初始值: ```html <el-date-picker v-model="selectedDate" :default-value="getDefaultDate()" :disabled-date="disabledDate"></el-date-picker> ``` 4. 在Vue组件中定义getDefaultDate方法来计算近一个月之前的日期,并将其返回: ```javascript methods: { getDefaultDate() { return moment().subtract(1, 'month').format('YYYY-MM-DD'); }, disabledDate(time) { // 在这里可以根据你的需求设置日期的不可选范围 return time.getTime() > new Date().getTime() || time.getTime() < moment().subtract(3, 'year').toDate().getTime(); }, }, ``` 通过以上步骤,你可以实现默认选中近一个月的日期,并且只能选择今天到三年前的日期,今天以后的日期将不可选。同时,你也解决了报400错误,对日期进行了格式化处理,确保前后端数据格式匹配。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue使用elementUI日期选择器](https://blog.csdn.net/weixin_48927323/article/details/128186565)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [解决vue elementUI 日期选择器提交springboot后端数据时报400错误](https://blog.csdn.net/Ppphill_C/article/details/118034550)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue elementui 范围选择周、季、年时间控件替换包.zip](https://download.csdn.net/download/qq_39019765/44321511)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值