Skip to content

Instantly share code, notes, and snippets.

@victusfate
Created July 31, 2023 15:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save victusfate/ab7cfbc6f6d5bac1400c96c76c2255db to your computer and use it in GitHub Desktop.
Save victusfate/ab7cfbc6f6d5bac1400c96c76c2255db to your computer and use it in GitHub Desktop.
simple vue sample with interactive date inputs
<template>
<div class="flex justify-between">
<div>
<label class="tw-inline-block tw-pt-2 tw-leading-tight tw-mb-1 tw-text-base mr-2">Start Date</label>
<input type="date" id="start_date" v-model="start_date" class="mb-4 w-32 h-8" />
</div>
<div>
<label class="tw-inline-block tw-pt-2 tw-leading-tight tw-mb-1 tw-text-base mr-2">End Date</label>
<input type="date" id="end_date" v-model="end_date" class="mb-4 w-32 h-8" />
</div>
</div>
</template>
<script>
import dayjs from 'dayjs'
export default {
name: 'App',
components: {},
data() {
return {
start_date: dayjs().subtract(2, 'week').format('YYYY-MM-DD'),
end_date: dayjs().format('YYYY-MM-DD'),
}
},
watch: {
start_date() {
// do stuff with dates
},
end_date() {
// do stuff with dates
},
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment