123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <template>
- <div>
- <el-button-group size="small" class="inline-24">
- <el-button :type="select === '日'?'primary':''" size="small" @click="selectQuick(1)" :disabled="disabled">日</el-button>
- <el-button :type="select === '周'?'primary':''" size="small" @click="selectQuick(2)" :disabled="disabled">周</el-button>
- <el-button :type="select === '月'?'primary':''" size="small" @click="selectQuick(3)" :disabled="disabled">月</el-button>
- <el-button :type="select === '年'?'primary':''" size="small" @click="selectQuick(4)" :disabled="disabled">年</el-button>
- </el-button-group>
- <span style="font-size: 13px">时间:</span>
- <el-date-picker
- value-format="yyyy-MM-dd"
- @change="selectDate"
- :append-to-body="disabled"
- size="small"
- v-model="value"
- type="daterange"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- </template>
- <script>
- export default {
- name: "quickDate",
- props:['disabled'],
- data(){
- return {
- select:'周',
- value:'',
- begindate:'',
- enddate:''
- }
- },
- methods:{
- selectQuick(val){
- this.value = ''
- this.begindate = ''
- this.enddate = ''
- if (val === 1){
- this.select = '日'
- var year = new Date().getFullYear()
- var month = new Date().getMonth()+1;
- var day = new Date().getDate();
- this.begindate = year + '-' + month + '-' + day
- this.enddate = year + '-' + month + '-' + day
- }else if (val === 2){
- this.select = '周'
- this.getMonday('s')
- this.getMonday('e')
- }else if (val === 3){
- this.select = '月'
- this.getMonth('s')
- this.getMonth('e')
- }else if (val === 4){
- this.select = '年'
- this.getYear('s')
- this.getYear('e')
- }else {
- this.select = ''
- }
- this.$emit('selectQuick',this.begindate,this.enddate,this.select)
- },
- getMonday(type, dates) {
- var now = new Date()
- var nowTime = now.getTime()
- var day = now.getDay()
- var longTime = 24 * 60 * 60 * 1000
- var n = longTime * 7 * (dates || 0)
- if (type == "s") {
- var dd = nowTime - (day - 1) * longTime + n
- }
- if (type == "e") {
- var dd = nowTime + (7 - day) * longTime + n
- }
- dd = new Date(dd)
- var y = dd.getFullYear()
- var m = dd.getMonth() + 1
- var d = dd.getDate();
- m = m < 10 ? "0" + m: m
- d = d < 10 ? "0" + d: d
- var day = y + "-" + m + "-" + d
- type == 's'?this.begindate = day : this.enddate = day
- },
- getMonth(type, months) {
- var d = new Date();
- var year = d.getFullYear()
- var month = d.getMonth() + 1
- month = month < 10 ? "0" + month: month
- var date = d.getDate();
- var firstday = year + "-" + month + "-" + "01"
- var lastday = ""
- if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
- lastday = year + "-" + month + "-" + 31
- } else if (month == "02") {
- if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
- lastday = year + "-" + month + "-" + 29
- } else {
- lastday = year + "-" + month + "-" + 28
- }
- } else {
- lastday = year + "-" + month + "-" + 30
- }
- var day = ""
- if (type == "s") {
- day = firstday
- this.begindate = firstday
- } else {
- day = lastday
- this.enddate = lastday
- }
- },
- getYear(type, dates) {
- var dd = new Date()
- var n = dates || 0
- var year = dd.getFullYear() + Number(n)
- if (type == "s") {
- var day = year + "-01-01"
- }
- if (type == "e") {
- var day = year + "-12-31"
- }
- if (!type) {
- var day = year + "-01-01/" + year + "-12-31"
- }
- type == 's'?this.begindate = day : this.enddate = day
- },
- selectDate(){
- this.begindate = ''
- this.enddate = ''
- if (this.value){
- this.select = ''
- this.begindate = this.value[0]
- this.enddate = this.value[1]
- }
- this.$emit('selectQuick',this.begindate,this.enddate,this.select)
- }
- }
- }
- </script>
- <style scoped>
- </style>
|