element时间选择器的默认值

这篇具有很好参考价值的文章主要介绍了element时间选择器的默认值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概览:vue使用element组件,需要给时间选择器设置默认值,场景一:默认时间选择器,场景二:时间范围选择器,开始时间和结束时间。

一、默认时间选择器

实现思路:

element组件的v-model绑定的数据变化,则时间选择器的默认值变化。可以在生命周期mounted() 或者 onMounted()组件挂载时进行赋值。

实现代码:

1.1布局:

<div class="search_right">
      <div class="echart1_titleBox">时间:</div>
      <div class="searchInnerBox">
           <el-date-picker 
            v-model="data.crewOverViewTime" 
            type="date" value-format="YYYY-MM-DD"
            placeholder="请选择" 
            clearable 
            :default-value="new Date()"
            @change="handleChangeTime" 
            />
       </div>
</div>

1.2逻辑: 

/** 
 * 默认选中当前时间
 */
let defalutTime = replaceTime(new Date());
data.crewOverViewTime = defalutTime
const replaceTime = (date) => {
  // 获取当前月份
  let nowMonth = date.getMonth() + 1;

  // 获取当前是几号
  let strDate = date.getDate();

  // 添加分隔符“-”
  let seperator = "-";

  // 对月份进行处理,1-9月在前面添加一个“0”
  if (nowMonth >= 1 && nowMonth <= 9) {
    nowMonth = "0" + nowMonth;
  }

  // 对月份进行处理,1-9号在前面添加一个“0”
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }

  // 最后拼接字符串,得到一个格式为(yyyy-MM-dd)的日期
  let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;

  return nowDate;
};

1.3效果展示

elementui选择器设置默认值,vue.js,elementui

二、时间范围选择器

实现思路:

element组件的v-model绑定数据,在组件挂载的生命周期onMounted()进行赋值。注意:时间范围选择器的v-modle绑定的动态数据data是一个数组,数组索引=0是开始时间,数组索引=1是结束时间。

实现代码:

1.1页面:

<div class="searchTimerBox">
     <div class="searchTimerBox_titleBox">时间:</div>
     <div class="searchInnerBox">
          <el-date-picker 
              v-model="data.valueTwoTimer" 
              type="monthrange" 
              value-format="YYYY-MM"
              range-separator="到" 
              start-placeholder="开始时间" 
              end-placeholder="结束时间"
              :unlink-panels="true" 
              @change="handleChangeTime" 
           />
      </div>
</div>

1.2逻辑:

/**
 * 默认选中此月往前推的12个月
 */
const getTimerPiker = () => {
    let newData = new Date()
    let seperator = "-";
    let nowMonth = newData.getMonth() + 1
    if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
    }
    nowMonth = newData.getFullYear() + seperator + nowMonth;
    const beforeMonth = minDate(newData, 11)
    data.valueTwoTimer.push(beforeMonth)
    data.valueTwoTimer.push(nowMonth)
}
//获取当前日期的 前n个月
const minDate = (_nowDate,_latestMonth) => {
  _nowDate.setMonth(_nowDate.getMonth() - _latestMonth)
  let year = _nowDate.getFullYear();
  let month = (_nowDate.getMonth() + 1).toString().padStart(2, '0');
  let time = year + '-' + month
  return time
};

1.3效果展示

elementui选择器设置默认值,vue.js,elementui文章来源地址https://www.toymoban.com/news/detail-623568.html

到了这里,关于element时间选择器的默认值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包