iview里面时间选择器（默认当月1号到至今）

最新推荐文章于 2024-07-23 10:19:27 发布

沫熙瑾年

最新推荐文章于 2024-07-23 10:19:27 发布

阅读量3.4k

点赞数

本文链接：https://blog.csdn.net/xy19950125/article/details/83418087

版权

<template>
<div>
    <DatePicker type="date" :options="options3" :value="beginTime" @on-change="beginTimeChange" 
        placeholder="开始时间" style="width: 150px">
    </DatePicker>
    <span>  -  </span>
    <DatePicker type="date" :options="options3" :value="endTime" @on-change="endTimeChange"             
        placeholder="结束时间" style="width: 150px">
    </DatePicker>   
    <Button type="info" :loading="loading3" @click="queryReportList">
      <span v-if="!loading3">查询</span>
      <span v-else>查询</span>
    </Button>
</div>
</template>
<script>
  export default{
      data(){
        return{
          loading3:false,
          beginTime:"",
          endTime: "",
          options3: {
              disabledDate(date) {
                return date && date.valueOf() > Date.now();
              }
          }
        }
      },
      methods:{
          beginTimeChange(value, data) {
            this.beginTime = value;
          },
          endTimeChange(value, data) {
            this.endTime = value;
          },
          timeFormat(date, num) {
            let y = date.getFullYear(); //年
            let m = date.getMonth() + 1; //月
            let d = date.getDate(); //日
            if (num == 1) {
              d = date.getDate();
            }
            m = m < 10 ? "0" + m : m;
            d = d < 10 ? "0" + d : d;
            return y + "-" + m + "-" + d;
          },
          //弹出层效果加验证
          queryReportList(){
              let date1 = Date.parse(new Date(this.beginTime)) / 1000;
              let date2 = Date.parse(new Date(this.endTime)) / 1000;
              if (date1 > date2) {
                  this.$Modal.warning({
                      title: "提示",
                      content: "<p>开始时间不得大于结束时间</p>"
                  });
                  return false;
              }
          }
      },
      mounted() {
          var date = new Date();
          this.endTime = this.timeFormat(date, 1);
          date.setDate(1);
          this.beginTime = this.timeFormat(date, 0);
          this.queryReportList();
    }
  
  }
</script>
<style>

</style>

默认当月一号到当天的前一天

<template>
<div>
    <DatePicker type="date" :options="options3" :value="beginTime" @on-change="beginTimeChange" 
        placeholder="开始时间" style="width: 150px">
    </DatePicker>
    <span>  -  </span>
    <DatePicker type="date" :options="options3" :value="endTime" @on-change="endTimeChange"             
        placeholder="结束时间" style="width: 150px">
    </DatePicker>   
    <Button type="info" :loading="loading3" @click="queryReportList">
      <span v-if="!loading3">查询</span>
      <span v-else>查询</span>
    </Button>
</div>
</template>
<script>
  export default{
      data(){
        return{
          loading3:false,
          beginTime:"",
          endTime: "",
          getdate:"",
          options3: {
              disabledDate(date) {
                return date && date.valueOf() > Date.now();
              }
          }
        }
      },
      methods:{
          beginTimeChange(value, data) {
            this.beginTime = value;
          },
          endTimeChange(value, data) {
            this.endTime = value;
          },
          //弹出层效果加验证
          queryReportList(){
              let date1 = Date.parse(new Date(this.beginTime)) / 1000;
              let date2 = Date.parse(new Date(this.endTime)) / 1000;
              if (date1 > date2) {
                  this.$Modal.warning({
                      title: "提示",
                      content: "<p>开始时间不得大于结束时间</p>"
                  });
                  return false;
              }
          }
      },
      mounted() {
          var myDate = new Date(); 
          var year = myDate.getFullYear(); 
          var month = myDate.getMonth()+1 //获取当前月份(0-11,0代表1月，所以要加1); 
          var day = myDate.getDate();//获取当前日（1-31） 
          if (month<10) { month = "0" + month; } 
          if (day >= 0 && day <= 9) {
            if (day == 1) {
            month = myDate.getMonth()
            if(month==0) {
            month=12; year=year-1; 
            }
            day = new Date(year, month, 0).getDate ();
            } else {
            // day = day < 10 ? "0" + (day-1) : (day-1);当日的前一天
            // day = day < 10 ? "0" + day : day 当日
            } 
          } 
          this.beginTime = year+'-'+month + "-" + "01";
          this.endTime = year+"-"+month + "-" + day;
          this.queryBusiness(() => {
            this.queryReportList()
          })
          this.queryReportList();
    }
  
  }
</script>
<style>
 
</style>