|
@@ -63,103 +63,103 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import Vue from 'vue'
|
|
|
- import moment from 'moment'
|
|
|
- import {Button, DatetimePicker} from 'vant'
|
|
|
+import Vue from 'vue'
|
|
|
+import moment from 'moment'
|
|
|
+import {Button, DatetimePicker} from 'vant'
|
|
|
|
|
|
- Vue.use(Button).use(DatetimePicker)
|
|
|
+Vue.use(Button).use(DatetimePicker)
|
|
|
|
|
|
- export default {
|
|
|
- name: 'DateSelectorDropdown',
|
|
|
- props: {
|
|
|
- title: {type: String},
|
|
|
- resetBtnText: {type: String, default: '恢复默认'}
|
|
|
+export default {
|
|
|
+ name: 'DateSelectorDropdown',
|
|
|
+ props: {
|
|
|
+ title: {type: String},
|
|
|
+ resetBtnText: {type: String, default: '恢复默认'}
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ currDatePicker: 1,
|
|
|
+ dateMode: 1,
|
|
|
+ endDate: new Date(),
|
|
|
+ startDate: new Date()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ startDate (newVal) {
|
|
|
+ this.changeTitle(newVal)
|
|
|
},
|
|
|
- data () {
|
|
|
- return {
|
|
|
- currDatePicker: 1,
|
|
|
- dateMode: 1,
|
|
|
- endDate: new Date(),
|
|
|
- startDate: new Date(),
|
|
|
- }
|
|
|
+ dateMode () {
|
|
|
+ this.changeTitle(this.startDate)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isMonthMode () {
|
|
|
+ return this.dateMode === 1
|
|
|
},
|
|
|
- watch: {
|
|
|
- startDate (newVal) {
|
|
|
- this.changeTitle(newVal)
|
|
|
- },
|
|
|
- dateMode () {
|
|
|
- this.changeTitle(this.startDate)
|
|
|
- }
|
|
|
+ isDayMode () {
|
|
|
+ return this.dateMode !== 1
|
|
|
+ },
|
|
|
+ startDateStr () {
|
|
|
+ return moment(this.startDate).format(
|
|
|
+ this.isMonthMode ? 'YYYY-MM' : 'YYYY-MM-DD'
|
|
|
+ )
|
|
|
},
|
|
|
- computed: {
|
|
|
- isMonthMode () {
|
|
|
- return this.dateMode === 1
|
|
|
- },
|
|
|
- isDayMode () {
|
|
|
- return this.dateMode !== 1
|
|
|
- },
|
|
|
- startDateStr () {
|
|
|
- return moment(this.startDate).format(
|
|
|
- this.isMonthMode ? 'YYYY-MM' : 'YYYY-MM-DD'
|
|
|
- )
|
|
|
- },
|
|
|
- endDateStr () {
|
|
|
- return this.endDate ? moment(this.endDate).format('YYYY-MM-DD') : null
|
|
|
- },
|
|
|
- minEndDate () {
|
|
|
- return this.deepCopyDate(this.startDate)
|
|
|
+ endDateStr () {
|
|
|
+ return this.endDate ? moment(this.endDate).format('YYYY-MM-DD') : null
|
|
|
+ },
|
|
|
+ minEndDate () {
|
|
|
+ return this.deepCopyDate(this.startDate)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatter (type, val) {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${val}年`
|
|
|
+ } else if (type === 'month') {
|
|
|
+ return `${val}月`
|
|
|
}
|
|
|
+ return `${val}日`
|
|
|
},
|
|
|
- methods: {
|
|
|
- formatter (type, val) {
|
|
|
- if (type === 'year') {
|
|
|
- return `${val}年`
|
|
|
- } else if (type === 'month') {
|
|
|
- return `${val}月`
|
|
|
- }
|
|
|
- return `日`
|
|
|
- },
|
|
|
- deepCopyDate (date) {
|
|
|
- return new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
|
|
- },
|
|
|
- changeTitle (startDate) {
|
|
|
- if (this.isMonthMode) {
|
|
|
- const now = new Date()
|
|
|
- if (startDate.getMonth() === now.getMonth() && startDate.getFullYear() === now.getFullYear()) {
|
|
|
- this.$emit('update:title', '本月')
|
|
|
- } else {
|
|
|
- this.$emit('update:title', startDate.getMonth()+1 +'月')
|
|
|
- }
|
|
|
+ deepCopyDate (date) {
|
|
|
+ return new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
|
|
+ },
|
|
|
+ changeTitle (startDate) {
|
|
|
+ if (this.isMonthMode) {
|
|
|
+ const now = new Date()
|
|
|
+ if (startDate.getMonth() === now.getMonth() && startDate.getFullYear() === now.getFullYear()) {
|
|
|
+ this.$emit('update:title', '本月')
|
|
|
} else {
|
|
|
- this.$emit('update:title','日')
|
|
|
+ this.$emit('update:title', '月')
|
|
|
}
|
|
|
- },
|
|
|
- onResetDate () {
|
|
|
- this.startDate = new Date()
|
|
|
+ } else {
|
|
|
+ this.$emit('update:title', '日')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onResetDate () {
|
|
|
+ this.startDate = new Date()
|
|
|
+ this.resetDefaultDateMode()
|
|
|
+ },
|
|
|
+ resetDefaultDateMode () {
|
|
|
+ this.endDate = new Date()
|
|
|
+ this.dateMode = 1
|
|
|
+ this.currDatePicker = 1
|
|
|
+ },
|
|
|
+ onConfirmDate () {
|
|
|
+ if (this.isDayMode && this.startDate.getTime() > this.endDate.getTime()) {
|
|
|
+ this.$notify({type: 'warning', message: '开始日期不能大于结束如期'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$emit('onConfirm', {dateMode: this.dateMode, startDate: this.startDateStr, endDate: this.endDateStr})
|
|
|
+ },
|
|
|
+ onChangeDateMode (val) {
|
|
|
+ if (this.dateMode === val) return
|
|
|
+ if (this.isMonthMode) {
|
|
|
+ this.dateMode = 2
|
|
|
+ } else {
|
|
|
this.resetDefaultDateMode()
|
|
|
- },
|
|
|
- resetDefaultDateMode () {
|
|
|
- this.endDate = new Date()
|
|
|
- this.dateMode = 1
|
|
|
- this.currDatePicker = 1
|
|
|
- },
|
|
|
- onConfirmDate () {
|
|
|
- if (this.isDayMode && this.startDate.getTime() > this.endDate.getTime()) {
|
|
|
- this.$notify({type: 'warning', message: '开始日期不能大于结束如期'})
|
|
|
- return
|
|
|
- }
|
|
|
- this.$emit('onConfirm', {dateMode: this.dateMode, startDate: this.startDateStr, endDate: this.endDateStr})
|
|
|
- },
|
|
|
- onChangeDateMode (val) {
|
|
|
- if (this.dateMode === val) return
|
|
|
- if (this.isMonthMode) {
|
|
|
- this.dateMode = 2
|
|
|
- } else {
|
|
|
- this.resetDefaultDateMode()
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.date-selector-dropdown_wrap {
|