vue中合并elementui日期和时间选择器

引言:我们经常使用elementl里的el-date-picker和el-time-picker标签但是有时候有需求需要获取一个完整的年月日分时秒的时候我们的标签就有局限了需要我们手动处理数据

代码

 <el-form-item label="检测时间">
   <el-col :span="11">
   //选择的日期
     <el-date-picker type="date" placeholder="选择日期" v-model="forms.tart_time"  style="width: 100%;"></el-date-picker>
   </el-col>
   <el-col class="line" :span="2">-</el-col>
   <el-col :span="11">
   //选择的时间
     <el-time-picker placeholder="选择时间" v-model="forms.tart_time1" style="width: 100%;"></el-time-picker>
   </el-col>
 </el-form-item>



// data
   tart_time:new Date(),
   tart_time1:new Date(),
//处理方法
       var year = this.tart_time.getFullYear();
          var month = this.tart_time.getMonth() + 1;
          var strDate = this.tart_time.getDate();
          var hh = this.tart_time1.getHours();            //时
          var mm = this.tart_time1.getMinutes();          //分
          var ss = this.tart_time1.getSeconds();
      //    console.log(hh,mm,ss)
 console.log(new Date(year+'-'+month+'-'+strDate+' '+hh+':'+mm+':'+ss))

在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值