12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <template>
- <a-range-picker
- style="width:100%"
- :value="date"
- :size="size"
- :disabledDate="disabledDate"
- :format="dateFormat"
- @change="dateChange"
- @calendarChange="dateCalendarChange"
- :placeholder="['开始时间', '结束时间']" />
- </template>
- <script>
- import moment from 'moment'
- export default {
- props: {
- value: {
- type: Array,
- default: () => {
- return []
- }
- },
- size: {
- type: String,
- default: 'default'
- },
- showTime: {
- type: Boolean,
- default: true
- }
- },
- data () {
- return {
- date: this.value,
- dateFormat: 'YYYY-MM-DD',
- selectPriceDate: ''
- }
- },
- methods: {
- // 不可选日期
- disabledDate (current) {
- // 最早可倒推选择两年数据,最晚为今天
- const minYearVs = moment().subtract(2, 'years') // 两年前 负值
- const maxYearVs = moment().endOf('day') // 今天,包含今天
- // 限制最多只能查一年区间的数据
- if (this.selectPriceDate) {
- const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') // 当前选中开始日期前推一年
- const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') // 当前选中开始日期后推一年
- // 判断两个时间段是否相差m天 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
- const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
- const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
- return current && current < beginDate || current && current > endDate
- } else {
- return current && current > maxYearVs || current && current < minYearVs
- }
- },
- // 日期 change
- dateChange (date, dateStrings) {
- this.selectPriceDate = ''
- this.date = date
- if (dateStrings[0] == '' && dateStrings[1] == '') {
- dateStrings = []
- } else {
- if (this.showTime) {
- dateStrings[0] = dateStrings[0] + ' 00:00:00'
- dateStrings[1] = dateStrings[1] + ' 23:59:59'
- }
- }
- this.$emit('change', dateStrings)
- },
- dateCalendarChange (date, dateStrings) {
- this.selectPriceDate = date[0]
- },
- resetDate (val) {
- this.date = val || []
- this.$emit('change', this.date)
- }
- }
- }
- </script>
|