知識點
- 定位：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() //返回該日期是星期幾