日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

Element UI日期組件-選擇月份具體到當(dāng)月最后一天

作者:大大。 更新時(shí)間: 2023-10-16 編程語言

Element已有的月份選擇組件,只能展示開始月份的1號(hào)到結(jié)束月份的1號(hào)(例如:開始月份為3月,結(jié)束月份為3月,input框內(nèi)只能展示2023-03-01至2023-03-01),但是我們的需求想要展示的是2023-03-01至2023-03-31這樣的日期范圍
?


<template>
  <div>
    <el-date-picker
      v-model="search.date"
      type="monthrange"
      size="small"
      format="yyyy-MM-dd"
      value-format="timestamp"
      range-separator="至"
      start-placeholder="開始月份"
      end-placeholder="結(jié)束月份"
      @change="(value) => changeMonth(value, 'search')"
    >
    </el-date-picker>
  </div>
</template>
 
    changeMonth(value, str){
      //查詢當(dāng)前月份月初到月末
      let myDate = new Date(value[1]);
      let month = myDate.getMonth() + 1;
      month = month < 10 ? "0" + month : month;   //格式化月份,補(bǔ)0
      let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //獲取當(dāng)月一共有多少天
      this.search.date = [value[0], value[1] + (dayEnd - 1) * 86400000]
console.log(value[0],'開始')
console.log(value[1] + (dayEnd - 1) * 86400000,'結(jié)束')
    },

效果如圖:可以選擇7月到7月,也可以選擇7-8月等。。?

?

原文鏈接:https://blog.csdn.net/weixin_43923808/article/details/131581420

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新