iview中的datePicker总结

发表于 | 分类于 | | 阅读次数:
字数统计: 1k 字 | 阅读时长 ≈ 5 分钟
  1. 显示星期数
  2. 两个时间选择器的禁用联动
  3. 日期对象扩展
    1. 日期格式化
    2. 取昨天
    3. 判断两个时间是否超过一个月
    4. 获取周次

显示星期数

开启属性 show-week-numbers 后，可以显示星期数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<DatePicker
	:open="open"
  v-model="startTime"
  show-week-numbers
  transfer
  confirm
  type="date"
  @on-clear="handleClear"
  @on-ok="handleOk">
  <a href="javascript:void(0)" @click="handleClick">
  	<Icon type="ios-calendar-outline"></Icon>
		<template v-if="!startTime || startTime === ''">请选择开始日期</template>
  	<template v-else>
			<span>
  			{{exportStartTime}},{{exportStartTime | weekNum}}
    	</span>
  	</template>
	</a>
</DatePicker>
1
2
3
4
5
6
7
8
9
10
11
12
watch:{
  startTime: {
    handler(value) {
      if (value && value instanceof Date) {
        this.exportStartTime = value.format('yyyy-MM-dd');
      } else {
        this.exportStartTime = '';
      }
    },
      immediate: true
  }
}
1
2
3
4
5
6
7
8
import { getweek } from '@/utils';
filters: {
  weekNum: function(value) {
    if (!value) return '';
    let weekNum = getweek(value);
    return `第${weekNum}周`;
  }
}

效果：

getWeek方法见“日期对象扩展”

两个时间选择器的禁用联动

产品任务daterange不太好用，因此改成2个时间选择器，需添加限制：开始时间不能晚于结束时间，结束时间不能早于开始时间。

1
2
3
4
5
6
7
8
9
10
<Col span="4">
  <FormItem label="发送时间:">
    <DatePicker type="date" placeholder="选择开始日期" style ="width:100%" v-model="searchData.sendTimeStart" :options="DateOptionsStart"></DatePicker>
  </FormItem>
</Col>
<Col span="4">
  <FormItem label=" ~ ">
    <DatePicker type="date" placeholder="选择结束日期" style ="width:100%" v-model="searchData.sendTimeEnd" size="small" :options="DateOptionsEnd"></DatePicker>
  </FormItem>
</Col>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
data() {
  return {
    DateOptionsStart: {
      disabledDate(date) {
        return '';
      }
    },
    DateOptionsEnd: {
      disabledDate(date) {
        return '';
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
watch: {
   'searchData.sendTimeEnd': {
     handler: function(val) {
       if (val) {
         this.DateOptionsStart = {
           disabledDate(date) {
             return date.valueOf() > new Date(val.format('yyyy-MM-dd'));
           }
         };
       } else {
         this.DateOptionsStart = {
           disabledDate(date) {
             return '';
           }
         };
       }
     },
     immediate: true
   },
   'searchData.sendTimeStart': {
     handler: function(val) {
       if (val) {
         this.DateOptionsEnd = {
           disabledDate(date) {
             return date.valueOf() < new Date(val.format('yyyy-MM-dd')) - 86400000;
           }
         };
       } else {
         this.DateOptionsEnd = {
           disabledDate(date) {
             return '';
           }
         };
       }
     },
     immediate: true
   }
 }

Date.format见“日期对象扩展”

日期对象扩展

日期格式化

datePicker取到的时间和从后端拿到的时间，最好进行format格式化，否则在前后端的数据传递中，可能会导致日期少一天

@/utils/index.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Date.prototype.format = function(format) {
  let o = {
    'M+': this.getMonth() + 1, //month
    'd+': this.getDate(), //day
    'h+': this.getHours(), //hour
    'm+': this.getMinutes(), //minute
    's+': this.getSeconds(), //second
    'q+': Math.floor((this.getMonth() + 3) / 3), //quarter
    S: this.getMilliseconds() //millisecond
  };
  if (/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
    }
  }
  return format;
};

@/index.js:

1
import '@/utils';

取昨天

1
2
3
export function yesterday() {
  return new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 1);
}

判断两个时间是否超过一个月

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export function isBeyondMonth(startTime, endTime) {
  let sDate = new Date(startTime);
  let eDate = new Date(endTime);

  if (eDate.getFullYear() - sDate.getFullYear() > 1) {
    //先比较年
    return true;
  } else if (eDate.getMonth() - sDate.getMonth() > 1) {
    //再比较月
    return true;
  } else if (eDate.getMonth() - sDate.getMonth() == 1) {
    if (eDate.getDate() - sDate.getDate() >= 1) {
      return true;
    }
  } else if (eDate.getFullYear() - sDate.getFullYear() == 1) {
    if (eDate.getMonth() + 12 - sDate.getMonth() > 1) {
      return true;
    } else if (eDate.getDate() - sDate.getDate() >= 1) {
      return true;
    }
  }
  return false;
}

获取周次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export function getweek(z) {
  //参数z是"2018-05-07 15:12:36"或者"2018/05/07 15:12:36"
  let day = Date.parse(z);
  let day11 = new Date(day);
  day11.setMonth(0);
  day11.setDate(1);
  day11.setHours(0);
  day11.setMinutes(0);
  day11.setSeconds(0); //到这里就得到该年的一月一日

  let day11mill = day11.getTime();
  let ori_day = day11.getDay(); //该年的一月一日是星期几
  let fill1 = 0; //与星期日相隔的毫秒数
  if (ori_day !== 0) {
    fill1 = ori_day * 60 * 60 * 24 * 1000;
  }

  let now = Date.parse(z);
  now = new Date(now);
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  let nowmill = now.getTime();
  let now_day = now.getDay();
  let fill2 = 0;
  if (now_day !== 0) {
    fill2 = (7 - now_day) * 60 * 60 * 24 * 1000;
  }

  let cha2 = (nowmill - day11mill + fill1 + fill2) / (60 * 60 * 24 * 1000);
  let week = Math.ceil(cha2 / 7);
  if (week < 10) {
    week = '0' + week;
  }
  let year = now.getFullYear().toString();
  year = year.substring(2);
  return week;
}