知识点
- 定位:element-ui 的el-row,el-col,其中用到列布局对齐方式justify和每列对齐方式align
- 时间格式的转换:UTC,yyyy-mm-dd,时间戳的相互转换
- element-ui 的日期选择器控件 datePicker :关注其中的focus方法使得选择器自动展开
- vue ref 属性的使用:使用ref 和 this.$refs.aa 获取到元素dom节点
展现
代码
<!-- 日期选择器,带快捷日期区间 在父组件中定位好,然后直接引用,该组件会返回对象 {start: '',end: ''} <date-picker @complete="getDate"></date-picker>--><template><div style="width:550px;"> <el-row type="flex" justify="end"> <el-col :span="15" align="right"> <el-button type="info" size="small" @click="showSel = true" style="width:200px;position:relative;" icon="el-icon-date">{{btnText}}</el-button> </el-col> </el-row> <!-- 选择器 --> <div class="picker-box"> <el-row type="flex" justify="end" align="right"> <el-col :span="11" align="right"> <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" ref="datepick" v-show="showSel &&type ==7"> </el-date-picker> </el-col> <el-col :span ='9' align="right"> <div class="list-box" v-show="showSel"> <p class="item" v-for="(item,index) in pickers" :key="index" :class="{ 'item-active' : type == index }" @click="setTime(index)">{{item}}</p> <div class="oper"> <a class="btn btn-green" @click="handleSubmit">应用</a> <a class="btn btn-white" @click="reset">取消</a> </div> </div> </el-col> </el-row> </div></div></template><style lang="scss" scoped>.picker-box { box-sizing: border-box; width: 550px; margin-top: 10px; z-index: 999;}.list-box { width: 200px; padding: 15px; background: 复制代码
<script>const data = [ '所有', '今天', '昨天', '最近7天', '最近30天', '这个月', '上个月', '自定义范围']export default { name: 'DatePicker', data() { return { pickers: data, //选择器按钮 btnText: '选择时间范围', showSel: false, //显示时间选择器 type: 0, //日期类型:今天,昨天,最近7天 time: '', start: '', end: '' } }, methods: { setTime(type) { this.type = type let start = new Date(), end = new Date() let y = start.getFullYear(), m = start.getMonth() + 1, d = start.getDate() switch (type) { case 0: { start = '' end = '' break } case 1: { break } case 2: { start.setTime(start.getTime() - 3600 * 1000 * 24 * 1) break } case 3: { start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) break } case 4: { start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) break } case 5: { let firDay = 1 start = new Date(y + '-' + m + '-' + firDay) start.setTime(start.getTime() + 3600 * 1000 * 24) //这个月1号 break } case 6: { let lastM = m - 1 let firDay = new Date(y + '-' + m + '-1') start = new Date(y + '-' + lastM + '-1') start.setTime(start.getTime() + 3600 * 1000 * 24) //上个月1号 end.setTime(firDay.getTime()) //上个月最后一天 break } // 自定义范围 case 7: { this.$refs.datepick.focus() break } } if (start && end) { start = this.formatDate(start) end = this.formatDate(end) this.time = [start, end] } else if (start == '' && end == '') { this.time = '' } }, // 提交 handleSubmit() { let type = this.type let obj = { start: this.time[0], end: this.time[1] } data.map((item, index) => { if (type == 7) { this.btnText = obj.start + ' ' + ' ~ ' + ' ' + obj.end } else if (type == index) { console.log(index) this.btnText = data[index] } }) this.showSel = false this.$emit('complete', obj) }, reset() { this.showSel = false this.start = '' this.end = '' this.time = '' this.type = 1 }, // UTC格式时间转 yyyy-mm-dd格式 formatDate(str) { let y = str.getUTCFullYear() let m = str.getUTCMonth() + 1 let d = str.getUTCDate() let date = y + '-' + m + '-' + d return date } }}</script>复制代码
时间格式转换
- let now = new Date() // Fri Apr 27 2018 10:19:41 GMT+0800 (中国标准时间)
- now.getTime() // 1524795581530
- now.setTime(1524795581530) // 1524795581530
- now.getFullYear() ,now.GetUTCFullYear() //2018
- now.getMonth() , now.getMonth() //3 月份从0开始,会返回0-11
- now.getDate() //返回一个月中的日期 1-31
- now.getDay() //返回该日期是星期几