jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-886: set up demo date picker page and beginnings of date-picker component

Browse source
This commit is contained in:
Adam Caouette 2023-02-10 13:18:04 -05:00
parent ec9963fb1e
commit 603068f98d
5 changed files with 677 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

380
src/common-components/date-picker/date-picker.spec.js Normal file
View file

@ -0,0 +1,380 @@
import datePicker from "./date-picker";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("date-picker.vue", () => {
describe("initial setup", () => {
test("Creates a date object from today", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const testResult = wrapper.vm.todayDateObj instanceof Date;
// Assert
expect(testResult).toEqual(true);
wrapper.unmount();
});
});
describe("formatNumberToSetDigits", () => {
const testScenarios = [
[0, 3, "000"],
[8, 2, "08"],
[345, 2, "345"],
[4567, 0, "4567"],
];
test.each(testScenarios)(
"when num is %s and digits is %s, formatNumberToSetDigits should return %s",
async (num, digits, expectedReturn) => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const fnReturn = wrapper.vm.formatNumberToSetDigits(num, digits);
// Assert
expect(fnReturn).toEqual(expectedReturn);
}
);
});
describe("formatDate", () => {
test("Can format a date as MM/dd/yyyy", () => {
// Arrange
const { wrapper } = setupMocks({});
const testDate = new Date("01-26-2023");
// Act
const testResult = wrapper.vm.formatDate(testDate);
// Assert
expect(testResult).toEqual("01/26/2023");
wrapper.unmount();
});
// test("Can get correct initialFirstDate from today", () => {
// // Arrange
// const { wrapper } = setupMocks({
// propsData: {
// todayDate: "Thu Jan 26 2023",
// },
// });
// // Act
// const testResult = wrapper.vm.initialFirstDate;
// const testResultAsDateString = testResult.toDateString();
// // Assert
// expect(testResultAsDateString).toEqual("Sun Jan 22 2023");
// wrapper.unmount();
// });
});
describe("calendarData", () => {
test("should return an array", async () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const testResult = await wrapper.vm.calendarData;
// Assert
expect(Array.isArray(testResult)).toBe(true);
wrapper.unmount();
});
describe("for each month in calendarData, each should have keys monthLabel, yearNum, dates, startDayIndex", () => {
const testScenarios = [
["monthLabel", true, "string"],
["yearNum", true, "number"],
["dates", true, "object"],
["startDayIndex", true, "number"],
["monthClass", true, "string"],
];
test.each(testScenarios)(
"test for %s key should return %s and be type %s",
async (label, test, type) => {
// Arrange
const { wrapper } = setupMocks({});
const containsMonthLabel = (obj) => Object.hasOwn(obj, label);
const isCorrectType = (obj) => typeof obj[label] === type;
const isTruthyOrZero = (obj) => (obj[label] || obj[label] === 0 ? true : false);
// Act
const calendarData = await wrapper.vm.calendarData;
console.log("calendarData: ", calendarData)
// Assert
expect(calendarData.every(containsMonthLabel)).toBe(true);
expect(calendarData.every(isCorrectType)).toBe(true);
expect(calendarData.every(isTruthyOrZero)).toBe(true);
wrapper.unmount();
}
);
});
test("for each month in calendarData, the dates array should have the 1st of the month", async () => {
// Arrange
const { wrapper } = setupMocks({});
const hasAFirstInDates = (obj) => obj?.dates[0].dateNum === 1;
// Act
const calendarData = await wrapper.vm.calendarData;
// Assert
expect(calendarData.every(hasAFirstInDates)).toBe(true);
wrapper.unmount();
});
describe("for each month in calendarData, the dates array should have correct days of month", () => {
const testScenarios = [
["2022-02-05T03:00:00", 28, true],
["2024-02-05T03:00:00", 29, true],
["2020-01-15T03:00:00", 31, true],
];
test.each(testScenarios)(
"the current month including the date %s should have %s days in its dates array",
async (dateString, noOfDays) => {
// Arrange
const { wrapper } = setupMocks({
propsData: {
todayOverrideDateString: dateString,
},
});
// Act
const calendarData = await wrapper.vm.calendarData;
const currentMonthIndex = calendarData.findIndex((month) => {
return month.monthClass === "currentMonth";
});
// Assert
expect(calendarData[currentMonthIndex].dates.length === noOfDays).toBe(true);
wrapper.unmount();
}
);
// test.each(testScenarios)(
// "the date %s should have %s days in dates array",
// async (dateString, noOfDays) => {
// // Arrange
// const { wrapper } = setupMocks({
// propsData: {
// todayOverrideDateString: dateString,
// },
// });
// const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays;
// // Act
// const calendarData = await wrapper.vm.calendarData;
// // Assert
// expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true);
// wrapper.unmount();
// }
// );
});
// describe("for each object in array, the dates array should have correct days of month", () => {
// const testScenarios = [
// ["2022-02-05T03:00:00", 28, true],
// ["2024-02-05T03:00:00", 29, true],
// ["2020-01-15T03:00:00", 31, true],
// ];
// test.each(testScenarios)(
// "the date %s should have %s days in dates array",
// async (dateString, noOfDays) => {
// // Arrange
// const { wrapper } = setupMocks({
// propsData: {
// todayOverrideDateString: dateString,
// },
// });
// const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays;
// // Act
// const calendarData = await wrapper.vm.calendarData;
// // Assert
// expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true);
// wrapper.unmount();
// }
// );
// });
// test.only("each object in array should have a monthLabel", () => {
// // Arrange
// const { wrapper } = setupMocks({});
// // const testTodayDate = new Date("01-26-2023");
// // Act
// const testResult = wrapper.vm.calendarData;
// const containsMonthLabel = (month) => Object.hasOwn(month, 'monthLabel');
// // Assert
// expect(testResult.every(containsMonthLabel)).toBe(true);
// });
// test.only("array should have a month object with same month as today", () => {
// // Arrange
// const { wrapper } = setupMocks({});
// // const testTodayDate = new Date("01-26-2023");
// // Act
// // const testResult = wrapper.vm.calendarData;
// console.log("wrapper.vm.calendarData: ", wrapper.vm.calendarData)
// // Assert
// // expect(wrapper.vm.calendarData).toEqual("something");
// // expect(wrapper.vm.calendarDataOld).toEqual("something");
// expect(wrapper.vm.calendarData[1]).toMatchObject({
// "dates": [
// {
// "dateNum": 1
// },
// {
// "dateNum": 2
// },
// {
// "dateNum": 3
// },
// {
// "dateNum": 4
// },
// {
// "dateNum": 5
// },
// {
// "dateNum": 6
// },
// {
// "dateNum": 7
// },
// {
// "dateNum": 8
// },
// {
// "dateNum": 9
// },
// {
// "dateNum": 10
// },
// {
// "dateNum": 11
// },
// {
// "dateNum": 12
// },
// {
// "dateNum": 13
// },
// {
// "dateNum": 14
// },
// {
// "dateNum": 15
// },
// {
// "dateNum": 16
// },
// {
// "dateNum": 17
// },
// {
// "dateNum": 18
// },
// {
// "dateNum": 19
// },
// {
// "dateNum": 20
// },
// {
// "dateNum": 21
// },
// {
// "dateNum": 22
// },
// {
// "dateNum": 23
// },
// {
// "dateNum": 24
// },
// {
// "dateNum": 25
// },
// {
// "dateNum": 26
// },
// {
// "dateNum": 27
// },
// {
// "dateNum": 28
// },
// {
// "dateNum": 29
// },
// {
// "dateNum": 30
// },
// {
// "dateNum": 31
// }
// ],
// "monthLabel": "January",
// "yearNum": 2023
// });
// wrapper.unmount();
// });
});
});
function setupMocks(mountOptionsMockData = {}) {
const initialMountOptionsMockData = {
// router: {
// navigate: jest.fn(),
// navigateWithSaving: jest.fn(),
// navigateWithoutSaving: jest.fn(),
// },
// actionList: [
// // {
// // actionName: storeActions.SAVE_PART_QUESTION_ANSWERS,
// // data: {},
// // },
// // {
// // actionName: storeActions.GET_PARTS,
// // data: {},
// // },
// ],
// store: {
// // getters: store.getters,
// // commit: store.commit,
// },
};
const mountOptions = getMountOptions(
Object.assign(initialMountOptionsMockData, mountOptionsMockData)
);
// console.log("mountOptions: ", mountOptions)
const wrapper = shallowMount(datePicker, mountOptions);
return { wrapper };
}

414
src/common-components/date-picker/date-picker.vue
View file

@ -1,205 +1,50 @@
<template>
<div id="app">
<fieldset>
formattedTodayDate is {{ formatDate(todayDateObj) }}
<br />
<span v-if="calendarData.length > 0"
>calendarData[0].monthLabel is {{ calendarData[0].monthLabel }}</span
>
<br />
<fieldset v-if="calendarData">
<legend class="sr-only">Date Picker</legend>
<div class="calendar-grid-container">
<div class="month-year body-small d-flex align-items-center ps-3 small">
{{ currentMonth }} {{ currentYear }}
<span
v-for="month in calendarData"
:key="`${month.monthLabel}-${month.yearNum.toString()}`">
<div class="calendar-grid-container">
<div class="month-year body-small d-flex align-items-center ps-3 small">
{{ month.monthLabel }} {{ month.yearNum.toString() }}
</div>
<div class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<!-- Do the days of the weeek need to be read? -->
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div
class="grid-item radio-wrapper"
:class="[date.dateNum === 1 ? 'first-day-' + month.startDayIndex : '']"
v-for="date in month.dates"
:key="`${month.monthLabel}-${date.dateNum.toString()}`">
<!-- TODO: maybe make date.dateNum a string in the data. Any reason not to? -->
<input
disabled
type="radio"
name="day-of-month"
id="`${month.monthLabel}-${date.dateNum.toString()}`" />
<label for="`${month.monthLabel}-${date.dateNum.toString()}`"
><span>{{ date.dateNum.toString() }}</span></label
>
</div>
</div>
<div class="legend caption d-flex align-items-center justify-content-end">
<span class="legend-circle me-1"></span> &equals; Available
</div>
<div class="nav-back ps-3"><button></button></div>
<div class="nav-forward pe-3"><button></button></div>
<!-- Do the days of the weeek need to be read? -->
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
<div class="grid-item radio-wrapper">
<input disabled type="radio" name="day-of-month" id="sep-25" />
<label class="past-day" for="sep-25"><span>25</span></label>
</div>
<div class="grid-item radio-wrapper">
<input disabled type="radio" name="day-of-month" id="sep-26" />
<label class="past-day" for="sep-26"><span>26</span></label>
</div>
<div class="grid-item radio-wrapper">
<input disabled type="radio" name="day-of-month" id="sep-27" />
<label class="past-day" for="sep-27"><span>27</span></label>
</div>
<div class="grid-item radio-wrapper">
<input disabled type="radio" name="day-of-month" id="sep-28" />
<label class="past-day" for="sep-28"><span>28</span></label>
</div>
<div class="grid-item radio-wrapper">
<input disabled type="radio" name="day-of-month" id="sep-29" />
<label class="past-day" for="sep-29"><span>29</span></label>
</div>
<div class="grid-item radio-wrapper">
<input disabled type="radio" name="day-of-month" id="sep-30" />
<label class="past-day" for="sep-30"><span>30</span></label>
</div>
<!-- Use this as the base calendar item -->
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-1" />
<label
class="highlighted-day selectable-day"
:class="[isCurrentDay ? 'current-day' : '']"
for="oct-1"
><span>1</span>
<span class="sr-only">October 1st</span>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</label>
</div>
<!-- END -->
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-2" />
<label class="selectable-day" for="oct-2"><span>2</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-3" />
<label class="selectable-day" for="oct-3"><span>3</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-4" />
<label class="selectable-day" for="oct-4"><span>4</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-5" />
<label class="selectable-day" for="oct-5"><span>5</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-6" />
<label class="selectable-day" for="oct-6"><span>6</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-7" />
<label class="selectable-day" for="oct-7"><span>7</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-8" />
<label class="selectable-day" for="oct-8"><span>8</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-9" />
<label class="selectable-day" for="oct-9"><span>9</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-10" />
<label class="selectable-day" for="oct-10"><span>10</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-11" />
<label class="selectable-day" for="oct-11"><span>11</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-12" />
<label class="selectable-day" for="oct-12"><span>12</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-13" />
<label class="selectable-day" for="oct-13"><span>13</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-14" />
<label class="selectable-day" for="oct-14"><span>14</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-15" />
<label class="selectable-day" for="oct-15"><span>15</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-16" />
<label class="selectable-day" for="oct-16"><span>16</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-17" />
<label class="selectable-day" for="oct-17"><span>17</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-18" />
<label class="selectable-day" for="oct-18"><span>18</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-19" />
<label class="selectable-day" for="oct-19"><span>19</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-20" />
<label class="selectable-day" for="oct-20"><span>20</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-21" />
<label class="selectable-day" for="oct-21"><span>21</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-22" />
<label class="selectable-day" for="oct-22"><span>22</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-23" />
<label class="selectable-day" for="oct-23"><span>23</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-24" />
<label class="selectable-day" for="oct-24"><span>24</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-25" />
<label class="selectable-day" for="oct-25"><span>25</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-26" />
<label class="selectable-day" for="oct-26"><span>26</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-27" />
<label class="selectable-day" for="oct-27"><span>27</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-28" />
<label class="selectable-day" for="oct-28"><span>28</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-29" />
<label class="selectable-day" for="oct-29"><span>29</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-30" />
<label class="selectable-day" for="nov-30"><span>30</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-31" />
<label class="selectable-day" for="oct-31"><span>31</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-1" />
<label class="future-day selectable-day" for="nov-1"
><span>1</span>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-2" />
<label class="future-day selectable-day" for="nov-2"><span>2</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-3" />
<label class="future-day selectable-day" for="nov-3"><span>3</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-4" />
<label class="future-day selectable-day" for="nov-4"><span>4</span></label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-5" />
<label class="future-day selectable-day" for="nov-5"><span>5</span></label>
</div>
</div>
</span>
</fieldset>
</div>
</template>
@ -209,16 +54,160 @@ export default {
name: "datePicker",
data() {
return {
currentMonth: "October",
currentYear: "2022",
currentMonth: "February",
currentYear: "2023",
isFirstDayOfMonth: true,
isCurrentDay: true,
// calendarData: [],
monthsBeforeToLoadOffset: -1,
monthsAfterToLoadOffset: 1,
};
},
props: {
todayOverrideDateString: { // only used for unit tests to override today's date
type: String,
default: null,
},
},
computed: {
todayDateObj() {
return this.todayOverrideDateString ? new Date(this.todayOverrideDateString) : new Date();
},
calendarData() {
return this.setCalendarData();
},
// initialFirstDate() {
// return startOfWeek(this.todayDateObj);
// },
},
// mounted() {
// this.setCalendarData();
// },
methods: {
formatDate(date) {
// return format(date, "MM/dd/yyyy");
// console.log("date: ", date)
const dateArr = date.toDateString().split(" ");
// console.log("dateArr: ", dateArr)
const dayIndex = date.getDay();
// console.log("dayIndex: ", dayIndex)
const dateIndex = date.getDate();
// console.log("dateIndex: ", dateIndex)
const yearIndex = date.getFullYear();
// console.log("yearIndex: ", yearIndex)
const monthIndex = date.getMonth();
// console.log("monthIndex: ", monthIndex)
const monthIndexStr = this.formatNumberToSetDigits(monthIndex + 1, 2);
const dateIndexStr = this.formatNumberToSetDigits(dateIndex, 2);
return monthIndexStr + "/" + dateIndexStr + "/" + yearIndex.toString();
},
formatNumberToSetDigits(num, digits) {
let numStr = num.toString();
// const strLength = numStr.length;
while (numStr.length < digits) {
numStr = "0" + numStr;
}
return numStr;
},
setCalendarData() {
const monthsOfYear = [ // TODO: MOVE THIS TO A CONSTANT
"January", // 0 // -12 // 12
"February", // 1 // -11 // 13
"March", // 2 // -10 // 14
"April", // 3 // -9 // 15
"May", // 4 // -8 // 16
"June", // 5 // -7 // 17
"July", // 6 // -6 // 18
"August", // 7 // -5 // 19
"September", // 8 // -4 // 20
"October", // 9 // -3 // 21
"November", // 10 // -2 // 22
"December", // 11 // -1 // 23
];
const todayDateObj = this.todayDateObj;
const todayMonth = todayDateObj.getMonth(); // returns zero index of months
const todayYear = todayDateObj.getFullYear(); // returns # of year
// const todayDate = todayDateObj.getDate(); // returns # of date
// const todayMonthFirstDate = new Date(todayYear, todayMonth, 1); // returns date object
// const todayMonthLastDate = new Date(todayYear, todayMonth + 1, 0); // returns date object
// const todayMonthLastDateNum = todayMonthLastDate.getDate(); // returns # of date
// const todayStartDayIndex = todayMonthFirstDate.getDay(); // returns zero index of weekdays
function getMonthData(offset) {
let monthClass = "";
let yearNum = todayYear;
let adjustedMonthIndex = todayMonth + offset;
// console.log("111... todayMonth: ", todayMonth, " / yearNum: ", yearNum, " / offset: ", offset);
if (offset === 0) {
monthClass = "currentMonth";
} else if (offset > 0) {
monthClass = "futureMonth";
while (adjustedMonthIndex > 11) {
adjustedMonthIndex = adjustedMonthIndex - 12;
yearNum++;
}
} else {
monthClass = "pastMonth";
while (adjustedMonthIndex < 0) {
adjustedMonthIndex = 12 + adjustedMonthIndex;
yearNum--;
}
}
// console.log("adjustedMonthIndex: ", adjustedMonthIndex, " / yearNum: ", yearNum);
const monthEndDate = new Date(yearNum, adjustedMonthIndex + 1, 0);
const datesArray = [];
for (let i = 1; i <= monthEndDate.getDate(); i++) {
datesArray.push({ dateNum: i });
}
const monthFirstDate = new Date(yearNum, adjustedMonthIndex, 1); // returns date object
const startDayIndex = monthFirstDate.getDay();
console.log("startDayIndex: ", startDayIndex)
const monthToAdd = {
monthLabel: monthsOfYear[adjustedMonthIndex],
yearNum: yearNum,
dates: datesArray,
startDayIndex: startDayIndex,
monthClass: monthClass,
};
// console.log("monthToAdd: ", monthToAdd)
return monthToAdd;
}
// this.monthsBeforeToLoadOffset, this.monthsAfterToLoadOffset (DATA VARS)
const months = [];
for (let i = this.monthsBeforeToLoadOffset; i <= this.monthsAfterToLoadOffset; i++) {
months.push(getMonthData(i));
}
return months;
},
getTodayDate() {
const todayDate = new Date();
return todayDate;
},
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
hr {
margin: 90px;
}
.calendar-grid-container {
margin: 0 auto;
max-width: 414px;
@ -231,6 +220,29 @@ export default {
.grid-item {
text-align: center;
margin: 10%;
&.first-day-,
&.first-day-0 {
grid-column-start: 1;
}
&.first-day-1 {
grid-column-start: 2;
}
&.first-day-2 {
grid-column-start: 3;
}
&.first-day-3 {
grid-column-start: 4;
}
&.first-day-4 {
grid-column-start: 5;
}
&.first-day-5 {
grid-column-start: 6;
}
&.first-day-6 {
grid-column-start: 7;
}
}
.month-year {

19
src/layouts/demo-date-picker/demo-date-picker.spec.js Normal file
View file

@ -0,0 +1,19 @@
import demoDatePicker from "./demo-date-picker";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("demo-date-picker.vue", () => {
test.only("test TK...", () => {});
});
function setupMocks({ mountOptionsMockData = {} }) {
const mountOptions = getMountOptions({
...mountOptionsMockData,
});
const wrapper = shallowMount(demoDatePicker, mountOptions);
return { wrapper };
}

59
src/layouts/demo-date-picker/demo-date-picker.vue Normal file
View file

@ -0,0 +1,59 @@
<template>
<div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition">
<date-picker />
<!-- <date-picker todayOverrideDateString="2024-02-25T03:00:00" /> -->
</div>
</div>
</div>
</div>
</template>
<script>
// Components
import datePicker from "@/common-components/date-picker/date-picker";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-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 { format } from "date-fns";
import baseMixin from "@/mixins/base-mixin";
export default {
name: "demo-date-picker",
// data() {
// return {
// todayDate: new Date(),
// };
// },
computed: {
todayDate() {
const today = new Date();
return today.toDateString();
},
},
methods: {
arePagePrerequisitesValid() {
return true;
},
},
components: {
datePicker,
funnelHeader,
vehicleBanner,
funnelSubHeader,
},
};
</script>

6
src/router/index.js
View file

@ -31,8 +31,14 @@ import { applicationConfig } from "../constants/application-config";
// Components
import quote from "@/layouts/quote/quote.vue";
import datePicker from "@/common-components/date-picker/date-picker.vue";
import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
const routes = [
{
path: "/demo-date-picker", // This is a temporary route for testing.
name: "demo-date-picker",
component: demoDatePicker,
},
{
path: "/date-picker", // This is a temporary route for testing.
name: "date-picker",