90 lines
3.1 KiB
Vue
90 lines
3.1 KiB
Vue
<template>
|
|
<div class="page-container-grouped-styles">
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
|
<div class="">
|
|
<div class="rounded text-center">
|
|
<div class="fade-on-route-transition">
|
|
<date-picker
|
|
selectableDates="custom"
|
|
v-model="selectedDate"
|
|
:customSelectableDatesCallback="getAvailableDates" />
|
|
<!-- EXAMPLE THAT OVERRIDES TODAY BY PASSING STRING --
|
|
<date-picker
|
|
selectableDates="custom"
|
|
v-model="selectedDate"
|
|
:customSelectableDatesCallback="getAvailableDates"
|
|
todayOverrideDateString="2022-12-30T03:00:00" /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import datePicker from "@/digital-components/date-picker/date-picker";
|
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
|
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
|
|
|
// Supporting files
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
import store from "@/store";
|
|
|
|
import baseMixin from "@/mixins/base-mixin";
|
|
|
|
export default {
|
|
name: "demo-date-picker",
|
|
data() {
|
|
return {
|
|
selectedDate: null,
|
|
// selectedDate: { // USE THIS FORMAT FOR A PRE-SELECTED DATE ON LOAD
|
|
// year: 2023,
|
|
// month: 3, // use 1-based index for months
|
|
// date: 21,
|
|
// },
|
|
mockSelectableDatesData: [
|
|
{ year: 2023, month: 3, date: 4 },
|
|
{ year: 2023, month: 3, date: 5 },
|
|
{ year: 2023, month: 3, date: 22 },
|
|
{ year: 2023, month: 4, date: 13 },
|
|
{ year: 2023, month: 4, date: 7 },
|
|
{ year: 2023, month: 4, date: 14 },
|
|
{ year: 2023, month: 4, date: 26 },
|
|
{ year: 2023, month: 5, date: 21 },
|
|
{ year: 2023, month: 5, date: 23 },
|
|
{ year: 2023, month: 5, date: 25 },
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
todayDate() {
|
|
const today = new Date();
|
|
return today.toDateString();
|
|
},
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
return true;
|
|
},
|
|
getAvailableDates(startDate, endDate) {
|
|
this.mockSelectableDatesData.push(endDate);
|
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
// temporary test method that adds endDate to list of selectable dates
|
|
return this.mockSelectableDatesData;
|
|
},
|
|
},
|
|
components: {
|
|
datePicker,
|
|
funnelHeader,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// .page-container-grouped-styles {
|
|
// padding: 0 .5rem !important;
|
|
// }
|
|
</style>
|