123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <template>
- <div style="display: flex;align-items: center;">
- <a-date-picker
- :size="size"
- :locale="locale"
- v-model="startValue"
- :allowClear="allowClear"
- :disabled-date="disabledStartDate"
- :show-time="showTime"
- :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
- placeholder="开始时间"
- :open="startOpen"
- inputReadOnly
- @openChange="handleStartOpenChange"
- @panelChange="handleStartPanelChange"
- :showToday="false"
- >
- <div slot="renderExtraFooter">
- <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
- <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
- <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
- <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
- <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
- </div>
- </a-date-picker>
- <span> 至 </span>
- <a-date-picker
- :size="size"
- :locale="locale"
- v-model="endValue"
- :allowClear="allowClear"
- :disabled-date="disabledEndDate"
- :show-time="showTime"
- :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
- placeholder="结束时间"
- inputReadOnly
- :open="endOpen"
- @openChange="handleEndOpenChange"
- @panelChange="handleEndPanelChange"
- :showToday="false"
- >
- <div slot="renderExtraFooter">
- <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
- <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
- <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
- <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
- <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
- </div>
- </a-date-picker>
- </div>
- </template>
- <script>
- import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
- import moment from 'moment'
- import 'moment/locale/zh-cn';
- moment.locale('zh-cn');//配置moment中文环境
- export default {
- props: {
- value: {
- type: Array,
- default: () => {
- return []
- }
- },
- size: {
- type: String,
- default: 'default'
- },
- showTime: {
- type: Boolean,
- default: false
- },
- allowClear: {
- type: Boolean,
- default: true
- }
- },
- data () {
- return {
- locale,
- startValue: this.value[0]||undefined,
- endValue: this.value[1]||undefined,
- endOpen: false,
- startOpen: false,
- ranges: {
- 'date1': [moment(), moment()],
- 'date2': [moment().subtract(1, 'months'), moment()],
- 'date3': [moment().startOf('month'), moment()],
- 'date4': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
- 'date5': [moment().subtract(1, 'years'), moment()]
- },
- startMode:'',
- endMode: ''
- }
- },
- watch: {
- startValue (val,old) {
- if(old&&!val){
- this.endValue = undefined
- }
- if(val && !this.endValue){
- this.endOpen = true
- }
- this.startValue = val
- this.changeInput()
- },
- endValue (val,old) {
- if(old&&!val){
- this.startValue = undefined
- }
- this.endValue = val
- this.changeInput()
- }
- },
- methods: {
- setVal (key) {
- this.startValue = this.ranges[key][0]
- this.endValue = this.ranges[key][1]
- this.startOpen = false
- this.endOpen = false
- },
- disabledStartDate (startValue) {
- const endValue = this.endValue
- const maxYearVs = moment().endOf('day') // 今天,包含今天
- if (endValue) {
- if (!this.startValue) {
- return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
- }
- if(this.startMode == 'year'){
- return startValue.valueOf() > moment().endOf('year').valueOf()
- }
- if(this.startMode == 'month'){
- return startValue.valueOf() > moment().endOf('month').valueOf()
- }
- return startValue.valueOf() > moment(endValue).valueOf() || startValue.valueOf() > maxYearVs.valueOf()
- }
- return startValue.valueOf() > maxYearVs.valueOf()
- },
- disabledEndDate (endValue) {
- const startValue = this.startValue
- const maxYearVs = moment().endOf('day') // 今天,包含今天
- if (startValue) {
- if(this.endMode == 'year'){
- const sv = moment(startValue).startOf('year')
- return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('year').valueOf()
- }
- if(this.endMode == 'month'){
- const sv = moment(startValue).startOf('month')
- return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('month').valueOf()
- }
- return moment(startValue).valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
- }
- return endValue.valueOf() > maxYearVs.valueOf()
- },
- handleStartOpenChange (open) {
- if(!open && !this.endValue){
- this.endOpen = !!this.startValue
- }
- if(!open){
- this.startMode = ''
- }
- this.startOpen = open
- },
- handleEndOpenChange (open) {
- if(!open){
- this.endMode = ''
- }
- this.endOpen = open
- },
- handleStartPanelChange (v, mode) {
- console.log(v, mode)
- this.startMode = mode
- },
- handleEndPanelChange (v, mode) {
- console.log(v, mode)
- this.endMode = mode
- },
- changeInput () {
- const startValue = this.startValue
- const endValue = this.endValue
- console.log(startValue, endValue)
- let dateStrings = [startValue, endValue]
- if (!dateStrings[0] && !dateStrings[1]) {
- dateStrings = []
- } else {
- if (!this.showTime) {
- dateStrings[0] = dateStrings[0] ? moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00') : ''
- dateStrings[1] = dateStrings[1] ? moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59') : ''
- } else {
- dateStrings[0] = dateStrings[0] ? moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss') : ''
- dateStrings[1] = dateStrings[1] ? moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss') : ''
- }
- }
- this.$emit('change', dateStrings)
- },
- resetDate (val) {
- this.startValue = val && val[0] || undefined
- this.endValue = val && val[1] || undefined
- this.$emit('change', [])
- }
- }
- }
- </script>
|