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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
| <template> <div class="block"> <span class="demonstration">快捷選項</span> <el-date-picker v-model="dateRange" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="開始月份" end-placeholder="結束月份" :picker-options="pickerOptions"> </el-date-picker> </div> </template>
<script> export default { data: ()=> ({ dateRange: [moment().startOf("month"), moment().endOf("month")], pickerOptions: { shortcuts: [ { text: "最近一週", onClick(picker) { let start = moment().startOf("week"); let end = moment().endOf("week"); picker.$emit("pick", [start, end]); } }, { text: "最近一個月", onClick(picker) { let start = moment().startOf("month"); let end = moment().endOf("month"); picker.$emit("pick", [start, end]); } }, { text: "上一個月", onClick(picker) { let start = moment() .startOf("month") .subtract(1, "month"); let end = moment() .endOf("month") .subtract(1, "month"); picker.$emit("pick", [start, end]); } }, { text: "最近三個月", onClick(picker) { let start = moment() .startOf("month") .subtract(2, "month"); let end = moment().endOf("month"); picker.$emit("pick", [start, end]); } } ] } }), watch: { dateRange:"changeRangeInfo" }, methods: { changeSearchInfo(info) { const { dateRange } = this; const startAt = moment(dateRange[0]).format("YYYY-MM-DD, 00:00:00"); const endAt = moment(dateRange[1]).format("YYYY-MM-DD, 23:59:59"); console.log({startAt,endAt}) } } }; </script>
|