nuVistA/htdocs/DateRangePicker.vue

<template>
	<div class="btn-group" role="group">
		<template v-if="x_range == '1D'">
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, -24*60*60*1000*(reversed ? -1 : +1))">🡠</button>
			<input type="date" class="form-control" v-model="disp_date" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, 24*60*60*1000*(reversed ? -1 : +1))">🡢</button>
		</template>
		<template v-if="x_range == '1W'">
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, -7*24*60*60*1000*(reversed ? -1 : +1))">🡠</button>
			<input type="date" class="form-control" v-model="disp_date" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, 7*24*60*60*1000*(reversed ? -1 : +1))">🡢</button>
		</template>
		<template v-if="x_range == '1M'">
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -1*(reversed ? -1 : +1))">🡠</button>
			<input type="date" class="form-control" v-model="disp_date" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 1*(reversed ? -1 : +1))">🡢</button>
		</template>
		<template v-if="x_range == '6M'">
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -6*(reversed ? -1 : +1))">🡠</button>
			<input type="date" class="form-control" v-model="disp_date" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 6*(reversed ? -1 : +1))">🡢</button>
		</template>
		<template v-if="x_range == '1Y'">
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -12*(reversed ? -1 : +1))">🡠</button>
			<input type="date" class="form-control" v-model="disp_date" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 12*(reversed ? -1 : +1))">🡢</button>
		</template>
		<template v-if="x_range == '2Y'">
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -24*(reversed ? -1 : +1))">🡠</button>
			<input type="date" class="form-control" v-model="disp_date" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
			<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 24*(reversed ? -1 : +1))">🡢</button>
		</template>
		<template v-if="x_range == 'Range'">
			<input type="date" class="form-control" v-model="disp_date_end" v-if="direction < 0" />
			<input type="date" class="form-control" v-model="disp_date" />
			<input type="date" class="form-control" v-model="disp_date_end" v-if="direction >= 0" />
			<DateRangePickerRange v-model="x_range" :direction="direction" />
		</template>
	</div>
</template>

<script>
	import DateRangePickerRange from './DateRangePickerRange.vue';

	function timeshift(date, ms) {
		return new Date(date.getTime() + ms);
	}

	function timeshift_month(date, diff) {
		var month = date.getMonth() + diff;
		return new Date(date.getFullYear() + Math.floor(month/12), month >= 0 ? (month%12) : (month%12 + 12), date.getDate());
	}

	function datecalc(date, range, direction) {
		switch(range) {
			case '1D':
				return timeshift(date, Math.sign(direction)*24*60*60*1000);
			case '1W':
				return timeshift(date, Math.sign(direction)*7*24*60*60*1000);
			case '1M':
				return timeshift_month(date, Math.sign(direction)*1);
			case '6M':
				return timeshift_month(date, Math.sign(direction)*6);
			case '1Y':
				return timeshift_month(date, Math.sign(direction)*12);
			case '2Y':
				return timeshift_month(date, Math.sign(direction)*24);
		}
		return date;
	}

	export default {
		components: {
			DateRangePickerRange
		},
		props: {
			range: {
				type: String,
				default: '1D'
			},
			direction: {
				type: String,
				default: '-1'
			},
			date: {
				type: Date,
				default: new Date()
			},
			date_end: {
				type: Date,
				default: new Date()
			},
			reversed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				x_range: this.range,
				x_date: this.date,
				x_date_end: this.date_end
			};
		},
		computed: {
			disp_date: {
				get() {
					return this.x_date.toLocaleDateString('en-CA');
				},
				set(value) {
					if(value.length > 0) {
						value = value.split('-');
						if(value[0] >= 1700) this.x_date = new Date(value[0], value[1] - 1, value[2]);
					}
				}
			},
			disp_date_end: {
				get() {
					return this.x_date_end.toLocaleDateString('en-CA');
				},
				set(value) {
					if(value.length > 0) {
						value = value.split('-');
						if(value[0] >= 1700) this.x_date_end = new Date(value[0], value[1] - 1, value[2]);
					}
				}
			},
			params() {
				return {
					x_date: this.x_date,
					x_range: this.x_range,
					direction: this.direction
				};
			}
		},
		watch: {
			params(value) {
				if(value.x_range != 'Range') this.x_date_end = datecalc(value.x_date, value.x_range, value.direction);
				this.$emit('update:date', value.x_date);
				this.$emit('update:date_end', this.x_date_end);
			},
			date(value) { this.x_date = value; },
			x_date(value) { this.$emit('update:date', value); },
			date_end(value) { this.x_date_end = value; },
			x_date_end(value) { this.$emit('update:date_end', value); },
			range(value) { this.x_range = value; },
			x_range(value) { this.$emit('update:range', value); }
		},
		methods: {
			timeshift, timeshift_month
		},
		mounted() {
			this.$emit('update:date_end', this.x_date_end = datecalc(this.x_date, this.x_range, this.direction));
		}
	};
</script>