vue elementui 日期datetimerange

1.template中:

        <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="8">
            <div class="pub_input_content">
              <span class="pub_input_title pub_input_title_data">创建时间</span>
              <el-date-picker
                v-model="searchData.create_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                class="pub_input_input pub_input_data"
                type="datetimerange"
                clearable
                @change="dateChangebirthday"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </el-col>

2.data中:

    // 搜索内容
      searchData: {
        list_type: '1',
        create_time: '', // 日期
        date: ''
      },

3.methods中:

    dateChangebirthday (val) {
      this.searchData.create_time = val
    },

    //获取数据方法中:
    if (this.searchData.create_time !== '' || this.searchData.create_time !== null) {
        const timeData = `${this.searchData.create_time[0]} - ${this.searchData.create_time[1]}`
        this.searchData.date = timeData
      } else {
        this.searchData.date = ''
      }
      const data = {
        list_type: this.searchData.list_type,
        create_time: this.searchData.date,
        page: this.page.currentPage,
        per_page: this.page.pageSize
      }

 

 

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值