[{"data":1,"prerenderedAt":2776},["ShallowReactive",2],{"navigation":3,"/blog/07-building-datepicker":50,"/blog/07-building-datepicker-surround":2771},[4],{"title":5,"path":6,"stem":7,"children":8,"page":49},"Blog","/blog","blog",[9,13,17,21,25,29,33,37,41,45],{"title":10,"path":11,"stem":12},"Finally","/blog/01-welcome-first-post","blog/01-welcome-first-post",{"title":14,"path":15,"stem":16},"I Love Flutter and Dart!","/blog/02-flutter-and-dart","blog/02-flutter-and-dart",{"title":18,"path":19,"stem":20},"First Flutter App","/blog/03-first-flutter-app","blog/03-first-flutter-app",{"title":22,"path":23,"stem":24},"A Project Idea - Working with GPX Data","/blog/04-gpx-project-idea","blog/04-gpx-project-idea",{"title":26,"path":27,"stem":28},"Update on GPX Project","/blog/05-gpx-electron-app","blog/05-gpx-electron-app",{"title":30,"path":31,"stem":32},"Ember, Electron, Vue, and TypeScript!","/blog/06-ember-vue-typescript","blog/06-ember-vue-typescript",{"title":34,"path":35,"stem":36},"Building a Date Picker","/blog/07-building-datepicker","blog/07-building-datepicker",{"title":38,"path":39,"stem":40},"A quick update","/blog/08-quick-update","blog/08-quick-update",{"title":42,"path":43,"stem":44},"Claude Code and More","/blog/09-claude-code-and-more","blog/09-claude-code-and-more",{"title":46,"path":47,"stem":48},"Claude Code and Bringing My Science Background and Programming Skills Together","/blog/10-bringing-science-and-programming-together","blog/10-bringing-science-and-programming-together",false,{"id":51,"title":34,"body":52,"date":2764,"description":2765,"extension":2766,"image":2767,"meta":2768,"minRead":175,"navigation":245,"path":35,"seo":2769,"stem":36,"__hash__":2770},"blog/blog/07-building-datepicker.md",{"type":53,"value":54,"toc":2746},"minimark",[55,66,71,74,78,87,91,94,99,102,204,208,863,867,937,941,944,1044,1048,1051,1114,1118,1121,1127,1315,1319,1338,1692,1696,1699,1702,2040,2044,2436,2440,2732,2736,2739,2742],[56,57,58,59],"p",{},"Final Code on GitHub:\n",[60,61,65],"a",{"href":62,"rel":63},"https://github.com/MSF42/VueDatePicker",[64],"nofollow","github.com/MSF42/VueDatePicker",[67,68,70],"h2",{"id":69},"gpx-app","GPX App",[56,72,73],{},"The GPX app is coming along quite well. I've learned a lot about TypeScript and\nworking with dates in JavaScript. My next blog post will be an update on that.\nFor now, I just want to talk about the datepicker I built.",[67,75,77],{"id":76},"datepickers","Datepickers",[56,79,80,81,86],{},"There are a lot of datepickers to choose from out there. When I needed one for\nthis app, I tried three or four from the vast selection on\n",[60,82,85],{"href":83,"rel":84},"https://www.npmjs.org",[64],"npm",". Out of the few that were aesthetically pleasing,\nputting them to use required more effort than I cared to expend. So, I decided\nto build my own! I thought it would be a nice learning opportunity. Developers\noften complain about working with dates in JavaScript, so I thought this would\nbe a great chance to get into it.",[67,88,90],{"id":89},"problem-solving","Problem Solving",[56,92,93],{},"First, the basics:",[95,96,98],"h3",{"id":97},"getting-and-emitting-date","Getting and Emitting Date",[56,100,101],{},"I needed the datepicker to be a reusable component, of course. So I set it up to\nreceive the date from the parent and emit the chosen date back to the parent.",[103,104,109],"pre",{"className":105,"code":106,"language":107,"meta":108,"style":108},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  props: {\n    date: {\n      required: true,\n      type: Date,\n    },\n  },\n  emits: [\"selected-date\"],\n","js","",[110,111,112,128,138,153,167,173,179],"code",{"__ignoreMap":108},[113,114,117,121,125],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sBMFI","  props",[113,122,124],{"class":123},"sMK4o",":",[113,126,127],{"class":123}," {\n",[113,129,131,134,136],{"class":115,"line":130},2,[113,132,133],{"class":119},"    date",[113,135,124],{"class":123},[113,137,127],{"class":123},[113,139,141,144,146,150],{"class":115,"line":140},3,[113,142,143],{"class":119},"      required",[113,145,124],{"class":123},[113,147,149],{"class":148},"sfNiH"," true",[113,151,152],{"class":123},",\n",[113,154,156,159,161,165],{"class":115,"line":155},4,[113,157,158],{"class":119},"      type",[113,160,124],{"class":123},[113,162,164],{"class":163},"sTEyZ"," Date",[113,166,152],{"class":123},[113,168,170],{"class":115,"line":169},5,[113,171,172],{"class":123},"    },\n",[113,174,176],{"class":115,"line":175},6,[113,177,178],{"class":123},"  },\n",[113,180,182,185,187,190,193,197,199,202],{"class":115,"line":181},7,[113,183,184],{"class":119},"  emits",[113,186,124],{"class":123},[113,188,189],{"class":163}," [",[113,191,192],{"class":123},"\"",[113,194,196],{"class":195},"sfazB","selected-date",[113,198,192],{"class":123},[113,200,201],{"class":163},"]",[113,203,152],{"class":123},[95,205,207],{"id":206},"basic-info","Basic Info",[103,209,211],{"className":105,"code":210,"language":107,"meta":108,"style":108},"const { date } = toRefs(props);\n\n// GET THE YEAR, MONTH, AND DAY FOR DROPDOWN DISPLAY\nconst dateYear = computed(() => {\n  return date.value.getFullYear();\n});\n// A NUMBER VERSION OF THE MONTH TO WORK WITH\nconst dateMonthInt = computed(() => {\n  return date.value.getMonth();\n});\n// A STRING VERSION OF THE MONTH TO DISPLAY\nconst dateMonthStr = computed(() => {\n  let month = months[dateMonthInt.value];\n  return month.length === 4\n    ? month\n    : months[dateMonthInt.value].slice(0, 3);\n});\n// ADD A \"0\" IF THE DATE IS LESS THAN 10\nconst dateDate = computed(() => {\n  return ((date.value.getDate() \u003C 10 ? \"0\" : \"\") +\n    date.value.getDate()) as unknown as number;\n});\n\n// MONTH AND DAY LISTS\nconst months = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\",\n];\nconst days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thur\", \"Fri\", \"Sat\"];\n",[110,212,213,241,247,253,277,302,311,316,336,356,365,371,391,419,438,447,485,494,500,520,571,601,610,615,621,634,647,659,671,683,695,707,719,731,743,755,767,779,786],{"__ignoreMap":108},[113,214,215,219,222,225,228,231,235,238],{"class":115,"line":116},[113,216,218],{"class":217},"spNyl","const",[113,220,221],{"class":123}," {",[113,223,224],{"class":163}," date ",[113,226,227],{"class":123},"}",[113,229,230],{"class":123}," =",[113,232,234],{"class":233},"s2Zo4"," toRefs",[113,236,237],{"class":163},"(props)",[113,239,240],{"class":123},";\n",[113,242,243],{"class":115,"line":130},[113,244,246],{"emptyLinePlaceholder":245},true,"\n",[113,248,249],{"class":115,"line":140},[113,250,252],{"class":251},"sHwdD","// GET THE YEAR, MONTH, AND DAY FOR DROPDOWN DISPLAY\n",[113,254,255,257,260,263,266,269,272,275],{"class":115,"line":155},[113,256,218],{"class":217},[113,258,259],{"class":163}," dateYear ",[113,261,262],{"class":123},"=",[113,264,265],{"class":233}," computed",[113,267,268],{"class":163},"(",[113,270,271],{"class":123},"()",[113,273,274],{"class":217}," =>",[113,276,127],{"class":123},[113,278,279,283,286,289,292,294,297,300],{"class":115,"line":169},[113,280,282],{"class":281},"s7zQu","  return",[113,284,285],{"class":163}," date",[113,287,288],{"class":123},".",[113,290,291],{"class":163},"value",[113,293,288],{"class":123},[113,295,296],{"class":233},"getFullYear",[113,298,271],{"class":299},"swJcz",[113,301,240],{"class":123},[113,303,304,306,309],{"class":115,"line":175},[113,305,227],{"class":123},[113,307,308],{"class":163},")",[113,310,240],{"class":123},[113,312,313],{"class":115,"line":181},[113,314,315],{"class":251},"// A NUMBER VERSION OF THE MONTH TO WORK WITH\n",[113,317,319,321,324,326,328,330,332,334],{"class":115,"line":318},8,[113,320,218],{"class":217},[113,322,323],{"class":163}," dateMonthInt ",[113,325,262],{"class":123},[113,327,265],{"class":233},[113,329,268],{"class":163},[113,331,271],{"class":123},[113,333,274],{"class":217},[113,335,127],{"class":123},[113,337,339,341,343,345,347,349,352,354],{"class":115,"line":338},9,[113,340,282],{"class":281},[113,342,285],{"class":163},[113,344,288],{"class":123},[113,346,291],{"class":163},[113,348,288],{"class":123},[113,350,351],{"class":233},"getMonth",[113,353,271],{"class":299},[113,355,240],{"class":123},[113,357,359,361,363],{"class":115,"line":358},10,[113,360,227],{"class":123},[113,362,308],{"class":163},[113,364,240],{"class":123},[113,366,368],{"class":115,"line":367},11,[113,369,370],{"class":251},"// A STRING VERSION OF THE MONTH TO DISPLAY\n",[113,372,374,376,379,381,383,385,387,389],{"class":115,"line":373},12,[113,375,218],{"class":217},[113,377,378],{"class":163}," dateMonthStr ",[113,380,262],{"class":123},[113,382,265],{"class":233},[113,384,268],{"class":163},[113,386,271],{"class":123},[113,388,274],{"class":217},[113,390,127],{"class":123},[113,392,394,397,400,402,405,408,411,413,415,417],{"class":115,"line":393},13,[113,395,396],{"class":217},"  let",[113,398,399],{"class":163}," month",[113,401,230],{"class":123},[113,403,404],{"class":163}," months",[113,406,407],{"class":299},"[",[113,409,410],{"class":163},"dateMonthInt",[113,412,288],{"class":123},[113,414,291],{"class":163},[113,416,201],{"class":299},[113,418,240],{"class":123},[113,420,422,424,426,428,431,434],{"class":115,"line":421},14,[113,423,282],{"class":281},[113,425,399],{"class":163},[113,427,288],{"class":123},[113,429,430],{"class":163},"length",[113,432,433],{"class":123}," ===",[113,435,437],{"class":436},"sbssI"," 4\n",[113,439,441,444],{"class":115,"line":440},15,[113,442,443],{"class":123},"    ?",[113,445,446],{"class":163}," month\n",[113,448,450,453,455,457,459,461,463,465,467,470,472,475,478,481,483],{"class":115,"line":449},16,[113,451,452],{"class":123},"    :",[113,454,404],{"class":163},[113,456,407],{"class":299},[113,458,410],{"class":163},[113,460,288],{"class":123},[113,462,291],{"class":163},[113,464,201],{"class":299},[113,466,288],{"class":123},[113,468,469],{"class":233},"slice",[113,471,268],{"class":299},[113,473,474],{"class":436},"0",[113,476,477],{"class":123},",",[113,479,480],{"class":436}," 3",[113,482,308],{"class":299},[113,484,240],{"class":123},[113,486,488,490,492],{"class":115,"line":487},17,[113,489,227],{"class":123},[113,491,308],{"class":163},[113,493,240],{"class":123},[113,495,497],{"class":115,"line":496},18,[113,498,499],{"class":251},"// ADD A \"0\" IF THE DATE IS LESS THAN 10\n",[113,501,503,505,508,510,512,514,516,518],{"class":115,"line":502},19,[113,504,218],{"class":217},[113,506,507],{"class":163}," dateDate ",[113,509,262],{"class":123},[113,511,265],{"class":233},[113,513,268],{"class":163},[113,515,271],{"class":123},[113,517,274],{"class":217},[113,519,127],{"class":123},[113,521,523,525,528,531,533,535,537,540,543,546,549,552,555,557,559,562,565,568],{"class":115,"line":522},20,[113,524,282],{"class":281},[113,526,527],{"class":299}," ((",[113,529,530],{"class":163},"date",[113,532,288],{"class":123},[113,534,291],{"class":163},[113,536,288],{"class":123},[113,538,539],{"class":233},"getDate",[113,541,542],{"class":299},"() ",[113,544,545],{"class":123},"\u003C",[113,547,548],{"class":436}," 10",[113,550,551],{"class":123}," ?",[113,553,554],{"class":123}," \"",[113,556,474],{"class":195},[113,558,192],{"class":123},[113,560,561],{"class":123}," :",[113,563,564],{"class":123}," \"\"",[113,566,567],{"class":299},") ",[113,569,570],{"class":123},"+\n",[113,572,574,576,578,580,582,584,587,590,593,596,599],{"class":115,"line":573},21,[113,575,133],{"class":163},[113,577,288],{"class":123},[113,579,291],{"class":163},[113,581,288],{"class":123},[113,583,539],{"class":233},[113,585,586],{"class":299},"()) ",[113,588,589],{"class":281},"as",[113,591,592],{"class":119}," unknown",[113,594,595],{"class":281}," as",[113,597,598],{"class":119}," number",[113,600,240],{"class":123},[113,602,604,606,608],{"class":115,"line":603},22,[113,605,227],{"class":123},[113,607,308],{"class":163},[113,609,240],{"class":123},[113,611,613],{"class":115,"line":612},23,[113,614,246],{"emptyLinePlaceholder":245},[113,616,618],{"class":115,"line":617},24,[113,619,620],{"class":251},"// MONTH AND DAY LISTS\n",[113,622,624,626,629,631],{"class":115,"line":623},25,[113,625,218],{"class":217},[113,627,628],{"class":163}," months ",[113,630,262],{"class":123},[113,632,633],{"class":163}," [\n",[113,635,637,640,643,645],{"class":115,"line":636},26,[113,638,639],{"class":123},"  \"",[113,641,642],{"class":195},"January",[113,644,192],{"class":123},[113,646,152],{"class":123},[113,648,650,652,655,657],{"class":115,"line":649},27,[113,651,639],{"class":123},[113,653,654],{"class":195},"February",[113,656,192],{"class":123},[113,658,152],{"class":123},[113,660,662,664,667,669],{"class":115,"line":661},28,[113,663,639],{"class":123},[113,665,666],{"class":195},"March",[113,668,192],{"class":123},[113,670,152],{"class":123},[113,672,674,676,679,681],{"class":115,"line":673},29,[113,675,639],{"class":123},[113,677,678],{"class":195},"April",[113,680,192],{"class":123},[113,682,152],{"class":123},[113,684,686,688,691,693],{"class":115,"line":685},30,[113,687,639],{"class":123},[113,689,690],{"class":195},"May",[113,692,192],{"class":123},[113,694,152],{"class":123},[113,696,698,700,703,705],{"class":115,"line":697},31,[113,699,639],{"class":123},[113,701,702],{"class":195},"June",[113,704,192],{"class":123},[113,706,152],{"class":123},[113,708,710,712,715,717],{"class":115,"line":709},32,[113,711,639],{"class":123},[113,713,714],{"class":195},"July",[113,716,192],{"class":123},[113,718,152],{"class":123},[113,720,722,724,727,729],{"class":115,"line":721},33,[113,723,639],{"class":123},[113,725,726],{"class":195},"August",[113,728,192],{"class":123},[113,730,152],{"class":123},[113,732,734,736,739,741],{"class":115,"line":733},34,[113,735,639],{"class":123},[113,737,738],{"class":195},"September",[113,740,192],{"class":123},[113,742,152],{"class":123},[113,744,746,748,751,753],{"class":115,"line":745},35,[113,747,639],{"class":123},[113,749,750],{"class":195},"October",[113,752,192],{"class":123},[113,754,152],{"class":123},[113,756,758,760,763,765],{"class":115,"line":757},36,[113,759,639],{"class":123},[113,761,762],{"class":195},"November",[113,764,192],{"class":123},[113,766,152],{"class":123},[113,768,770,772,775,777],{"class":115,"line":769},37,[113,771,639],{"class":123},[113,773,774],{"class":195},"December",[113,776,192],{"class":123},[113,778,152],{"class":123},[113,780,782,784],{"class":115,"line":781},38,[113,783,201],{"class":163},[113,785,240],{"class":123},[113,787,789,791,794,796,798,800,803,805,807,809,812,814,816,818,821,823,825,827,830,832,834,836,839,841,843,845,848,850,852,854,857,859,861],{"class":115,"line":788},39,[113,790,218],{"class":217},[113,792,793],{"class":163}," days ",[113,795,262],{"class":123},[113,797,189],{"class":163},[113,799,192],{"class":123},[113,801,802],{"class":195},"Sun",[113,804,192],{"class":123},[113,806,477],{"class":123},[113,808,554],{"class":123},[113,810,811],{"class":195},"Mon",[113,813,192],{"class":123},[113,815,477],{"class":123},[113,817,554],{"class":123},[113,819,820],{"class":195},"Tue",[113,822,192],{"class":123},[113,824,477],{"class":123},[113,826,554],{"class":123},[113,828,829],{"class":195},"Wed",[113,831,192],{"class":123},[113,833,477],{"class":123},[113,835,554],{"class":123},[113,837,838],{"class":195},"Thur",[113,840,192],{"class":123},[113,842,477],{"class":123},[113,844,554],{"class":123},[113,846,847],{"class":195},"Fri",[113,849,192],{"class":123},[113,851,477],{"class":123},[113,853,554],{"class":123},[113,855,856],{"class":195},"Sat",[113,858,192],{"class":123},[113,860,201],{"class":163},[113,862,240],{"class":123},[95,864,866],{"id":865},"toggle-calendar","Toggle Calendar",[103,868,870],{"className":105,"code":869,"language":107,"meta":108,"style":108},"const showDate = ref(false);\nconst toggleDateView = () => {\n    showDate.value = !showDate.value;\n};\n",[110,871,872,893,909,932],{"__ignoreMap":108},[113,873,874,876,879,881,884,886,889,891],{"class":115,"line":116},[113,875,218],{"class":217},[113,877,878],{"class":163}," showDate ",[113,880,262],{"class":123},[113,882,883],{"class":233}," ref",[113,885,268],{"class":163},[113,887,888],{"class":148},"false",[113,890,308],{"class":163},[113,892,240],{"class":123},[113,894,895,897,900,902,905,907],{"class":115,"line":130},[113,896,218],{"class":217},[113,898,899],{"class":163}," toggleDateView ",[113,901,262],{"class":123},[113,903,904],{"class":123}," ()",[113,906,274],{"class":217},[113,908,127],{"class":123},[113,910,911,914,916,918,920,923,926,928,930],{"class":115,"line":140},[113,912,913],{"class":163},"    showDate",[113,915,288],{"class":123},[113,917,291],{"class":163},[113,919,230],{"class":123},[113,921,922],{"class":123}," !",[113,924,925],{"class":163},"showDate",[113,927,288],{"class":123},[113,929,291],{"class":163},[113,931,240],{"class":123},[113,933,934],{"class":115,"line":155},[113,935,936],{"class":123},"};\n",[95,938,940],{"id":939},"emit-the-chosen-date","Emit the Chosen Date",[56,942,943],{},"Letting the parent know the date has been chosen:",[103,945,947],{"className":105,"code":946,"language":107,"meta":108,"style":108},"const dateChosen = (row: number, col: number) => {\n  let newdate = monthArray.value[row][col]\n  context.emit('selected-date', newdate)\n}\n",[110,948,949,984,1013,1039],{"__ignoreMap":108},[113,950,951,953,956,958,961,965,967,969,971,974,976,978,980,982],{"class":115,"line":116},[113,952,218],{"class":217},[113,954,955],{"class":163}," dateChosen ",[113,957,262],{"class":123},[113,959,960],{"class":123}," (",[113,962,964],{"class":963},"sHdIc","row",[113,966,124],{"class":123},[113,968,598],{"class":119},[113,970,477],{"class":123},[113,972,973],{"class":963}," col",[113,975,124],{"class":123},[113,977,598],{"class":119},[113,979,308],{"class":123},[113,981,274],{"class":217},[113,983,127],{"class":123},[113,985,986,988,991,993,996,998,1000,1002,1004,1007,1010],{"class":115,"line":130},[113,987,396],{"class":217},[113,989,990],{"class":163}," newdate",[113,992,230],{"class":123},[113,994,995],{"class":163}," monthArray",[113,997,288],{"class":123},[113,999,291],{"class":163},[113,1001,407],{"class":299},[113,1003,964],{"class":163},[113,1005,1006],{"class":299},"][",[113,1008,1009],{"class":163},"col",[113,1011,1012],{"class":299},"]\n",[113,1014,1015,1018,1020,1023,1025,1028,1030,1032,1034,1036],{"class":115,"line":140},[113,1016,1017],{"class":163},"  context",[113,1019,288],{"class":123},[113,1021,1022],{"class":233},"emit",[113,1024,268],{"class":299},[113,1026,1027],{"class":123},"'",[113,1029,196],{"class":195},[113,1031,1027],{"class":123},[113,1033,477],{"class":123},[113,1035,990],{"class":163},[113,1037,1038],{"class":299},")\n",[113,1040,1041],{"class":115,"line":155},[113,1042,1043],{"class":123},"}\n",[95,1045,1047],{"id":1046},"time-zone-offset","Time Zone Offset",[56,1049,1050],{},"If I don't use a timezone offset, the chosen date and displayed date can get out\nof sync. Adding this offset effectively sets the time for each day to midnight.",[103,1052,1054],{"className":105,"code":1053,"language":107,"meta":108,"style":108},"// add this to all new dates (milliseconds)\nconst tzOffset = computed(() => {\n    return date.value.getTimezoneOffset() * 1000;\n});\n",[110,1055,1056,1061,1080,1106],{"__ignoreMap":108},[113,1057,1058],{"class":115,"line":116},[113,1059,1060],{"class":251},"// add this to all new dates (milliseconds)\n",[113,1062,1063,1065,1068,1070,1072,1074,1076,1078],{"class":115,"line":130},[113,1064,218],{"class":217},[113,1066,1067],{"class":163}," tzOffset ",[113,1069,262],{"class":123},[113,1071,265],{"class":233},[113,1073,268],{"class":163},[113,1075,271],{"class":123},[113,1077,274],{"class":217},[113,1079,127],{"class":123},[113,1081,1082,1085,1087,1089,1091,1093,1096,1098,1101,1104],{"class":115,"line":140},[113,1083,1084],{"class":281},"    return",[113,1086,285],{"class":163},[113,1088,288],{"class":123},[113,1090,291],{"class":163},[113,1092,288],{"class":123},[113,1094,1095],{"class":233},"getTimezoneOffset",[113,1097,542],{"class":299},[113,1099,1100],{"class":123},"*",[113,1102,1103],{"class":436}," 1000",[113,1105,240],{"class":123},[113,1107,1108,1110,1112],{"class":115,"line":155},[113,1109,227],{"class":123},[113,1111,308],{"class":163},[113,1113,240],{"class":123},[95,1115,1117],{"id":1116},"month-length-and-first-day-of-month","Month Length and First Day of Month",[56,1119,1120],{},"Since JavaScript will return February 1 if you pass in January 32, this creates\na handy way to calculate the length of a month: Simply subtract the date value\nfrom 32.",[56,1122,1123,1124],{},"Example: January 32 will return February 1, so ",[110,1125,1126],{},"32 - 1 = 31",[103,1128,1130],{"className":105,"code":1129,"language":107,"meta":108,"style":108},"const getMonthLength = computed(() => {\n    return 32 - new Date(dateYear.value, dateMonthInt.value, 32).getDate();\n});\n\n// GET THE FIRST DAY OF THE MONTH\nconst getMonthFirstDay = computed(() => {\n    let weekStartsOnSun = new Date(dateYear.value, dateMonthInt.value).getDay();\n    return weekStartsOnSun === 0 ? 6 : weekStartsOnSun - 1;\n    // I subtracted 1 so the week could start on Monday\n});\n",[110,1131,1132,1151,1198,1206,1210,1215,1234,1275,1302,1307],{"__ignoreMap":108},[113,1133,1134,1136,1139,1141,1143,1145,1147,1149],{"class":115,"line":116},[113,1135,218],{"class":217},[113,1137,1138],{"class":163}," getMonthLength ",[113,1140,262],{"class":123},[113,1142,265],{"class":233},[113,1144,268],{"class":163},[113,1146,271],{"class":123},[113,1148,274],{"class":217},[113,1150,127],{"class":123},[113,1152,1153,1155,1158,1161,1164,1166,1168,1171,1173,1175,1177,1180,1182,1184,1186,1188,1190,1192,1194,1196],{"class":115,"line":130},[113,1154,1084],{"class":281},[113,1156,1157],{"class":436}," 32",[113,1159,1160],{"class":123}," -",[113,1162,1163],{"class":123}," new",[113,1165,164],{"class":233},[113,1167,268],{"class":299},[113,1169,1170],{"class":163},"dateYear",[113,1172,288],{"class":123},[113,1174,291],{"class":163},[113,1176,477],{"class":123},[113,1178,1179],{"class":163}," dateMonthInt",[113,1181,288],{"class":123},[113,1183,291],{"class":163},[113,1185,477],{"class":123},[113,1187,1157],{"class":436},[113,1189,308],{"class":299},[113,1191,288],{"class":123},[113,1193,539],{"class":233},[113,1195,271],{"class":299},[113,1197,240],{"class":123},[113,1199,1200,1202,1204],{"class":115,"line":140},[113,1201,227],{"class":123},[113,1203,308],{"class":163},[113,1205,240],{"class":123},[113,1207,1208],{"class":115,"line":155},[113,1209,246],{"emptyLinePlaceholder":245},[113,1211,1212],{"class":115,"line":169},[113,1213,1214],{"class":251},"// GET THE FIRST DAY OF THE MONTH\n",[113,1216,1217,1219,1222,1224,1226,1228,1230,1232],{"class":115,"line":175},[113,1218,218],{"class":217},[113,1220,1221],{"class":163}," getMonthFirstDay ",[113,1223,262],{"class":123},[113,1225,265],{"class":233},[113,1227,268],{"class":163},[113,1229,271],{"class":123},[113,1231,274],{"class":217},[113,1233,127],{"class":123},[113,1235,1236,1239,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1271,1273],{"class":115,"line":181},[113,1237,1238],{"class":217},"    let",[113,1240,1241],{"class":163}," weekStartsOnSun",[113,1243,230],{"class":123},[113,1245,1163],{"class":123},[113,1247,164],{"class":233},[113,1249,268],{"class":299},[113,1251,1170],{"class":163},[113,1253,288],{"class":123},[113,1255,291],{"class":163},[113,1257,477],{"class":123},[113,1259,1179],{"class":163},[113,1261,288],{"class":123},[113,1263,291],{"class":163},[113,1265,308],{"class":299},[113,1267,288],{"class":123},[113,1269,1270],{"class":233},"getDay",[113,1272,271],{"class":299},[113,1274,240],{"class":123},[113,1276,1277,1279,1281,1283,1286,1288,1291,1293,1295,1297,1300],{"class":115,"line":318},[113,1278,1084],{"class":281},[113,1280,1241],{"class":163},[113,1282,433],{"class":123},[113,1284,1285],{"class":436}," 0",[113,1287,551],{"class":123},[113,1289,1290],{"class":436}," 6",[113,1292,561],{"class":123},[113,1294,1241],{"class":163},[113,1296,1160],{"class":123},[113,1298,1299],{"class":436}," 1",[113,1301,240],{"class":123},[113,1303,1304],{"class":115,"line":338},[113,1305,1306],{"class":251},"    // I subtracted 1 so the week could start on Monday\n",[113,1308,1309,1311,1313],{"class":115,"line":358},[113,1310,227],{"class":123},[113,1312,308],{"class":163},[113,1314,240],{"class":123},[95,1316,1318],{"id":1317},"month-array-this-was-a-bit-tricky","Month Array (this was a bit tricky)",[1320,1321,1322,1326,1329,1332,1335],"ol",{},[1323,1324,1325],"li",{},"I created an array of 42 dates, since some months will need to display six\nweeks.",[1323,1327,1328],{},"I took the first day of the month and subtracted the 'day' value in order to\nfind out what date needed to be in the first square. For example, if February\n1 is a Thursday, the 'day' value for Thursday is 3. The first column (Monday)\nwill start on February 1st - 3, or January 29.",[1323,1330,1331],{},"I used 86400000 to account for the number of milliseconds in a day.",[1323,1333,1334],{},"I added a day for each item in the array.",[1323,1336,1337],{},"Finally, I returned six slices of the array, representing each week. This\nresults in an array of six arrays (i.e. 'weeks').",[103,1339,1341],{"className":105,"code":1340,"language":107,"meta":108,"style":108},"const monthArray = computed(() => {\n    let tempArray = [];\n    let firstDay = new Date(dateYear.value, dateMonthInt.value);\n    for (let i = 0; i \u003C 42; i++) {\n        tempArray.push(\n            new Date(\n                firstDay.getTime() +\n                    i * 86400000 +\n                    tzOffset.value -\n                    getMonthFirstDay.value * 86400000,\n            ),\n        );\n    }\n    return [\n        tempArray.slice(0, 7),\n        tempArray.slice(7, 14),\n        tempArray.slice(14, 21),\n        tempArray.slice(21, 28),\n        tempArray.slice(28, 35),\n        tempArray.slice(35),\n    ];\n});\n",[110,1342,1343,1362,1376,1409,1449,1462,1471,1485,1499,1511,1526,1533,1540,1545,1551,1572,1594,1616,1638,1660,1677,1684],{"__ignoreMap":108},[113,1344,1345,1347,1350,1352,1354,1356,1358,1360],{"class":115,"line":116},[113,1346,218],{"class":217},[113,1348,1349],{"class":163}," monthArray ",[113,1351,262],{"class":123},[113,1353,265],{"class":233},[113,1355,268],{"class":163},[113,1357,271],{"class":123},[113,1359,274],{"class":217},[113,1361,127],{"class":123},[113,1363,1364,1366,1369,1371,1374],{"class":115,"line":130},[113,1365,1238],{"class":217},[113,1367,1368],{"class":163}," tempArray",[113,1370,230],{"class":123},[113,1372,1373],{"class":299}," []",[113,1375,240],{"class":123},[113,1377,1378,1380,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407],{"class":115,"line":140},[113,1379,1238],{"class":217},[113,1381,1382],{"class":163}," firstDay",[113,1384,230],{"class":123},[113,1386,1163],{"class":123},[113,1388,164],{"class":233},[113,1390,268],{"class":299},[113,1392,1170],{"class":163},[113,1394,288],{"class":123},[113,1396,291],{"class":163},[113,1398,477],{"class":123},[113,1400,1179],{"class":163},[113,1402,288],{"class":123},[113,1404,291],{"class":163},[113,1406,308],{"class":299},[113,1408,240],{"class":123},[113,1410,1411,1414,1416,1419,1422,1424,1426,1429,1431,1434,1437,1439,1441,1444,1446],{"class":115,"line":155},[113,1412,1413],{"class":281},"    for",[113,1415,960],{"class":299},[113,1417,1418],{"class":217},"let",[113,1420,1421],{"class":163}," i",[113,1423,230],{"class":123},[113,1425,1285],{"class":436},[113,1427,1428],{"class":123},";",[113,1430,1421],{"class":163},[113,1432,1433],{"class":123}," \u003C",[113,1435,1436],{"class":436}," 42",[113,1438,1428],{"class":123},[113,1440,1421],{"class":163},[113,1442,1443],{"class":123},"++",[113,1445,567],{"class":299},[113,1447,1448],{"class":123},"{\n",[113,1450,1451,1454,1456,1459],{"class":115,"line":169},[113,1452,1453],{"class":163},"        tempArray",[113,1455,288],{"class":123},[113,1457,1458],{"class":233},"push",[113,1460,1461],{"class":299},"(\n",[113,1463,1464,1467,1469],{"class":115,"line":175},[113,1465,1466],{"class":123},"            new",[113,1468,164],{"class":233},[113,1470,1461],{"class":299},[113,1472,1473,1476,1478,1481,1483],{"class":115,"line":181},[113,1474,1475],{"class":163},"                firstDay",[113,1477,288],{"class":123},[113,1479,1480],{"class":233},"getTime",[113,1482,542],{"class":299},[113,1484,570],{"class":123},[113,1486,1487,1490,1493,1496],{"class":115,"line":318},[113,1488,1489],{"class":163},"                    i",[113,1491,1492],{"class":123}," *",[113,1494,1495],{"class":436}," 86400000",[113,1497,1498],{"class":123}," +\n",[113,1500,1501,1504,1506,1508],{"class":115,"line":338},[113,1502,1503],{"class":163},"                    tzOffset",[113,1505,288],{"class":123},[113,1507,291],{"class":163},[113,1509,1510],{"class":123}," -\n",[113,1512,1513,1516,1518,1520,1522,1524],{"class":115,"line":358},[113,1514,1515],{"class":163},"                    getMonthFirstDay",[113,1517,288],{"class":123},[113,1519,291],{"class":163},[113,1521,1492],{"class":123},[113,1523,1495],{"class":436},[113,1525,152],{"class":123},[113,1527,1528,1531],{"class":115,"line":367},[113,1529,1530],{"class":299},"            )",[113,1532,152],{"class":123},[113,1534,1535,1538],{"class":115,"line":373},[113,1536,1537],{"class":299},"        )",[113,1539,240],{"class":123},[113,1541,1542],{"class":115,"line":393},[113,1543,1544],{"class":123},"    }\n",[113,1546,1547,1549],{"class":115,"line":421},[113,1548,1084],{"class":281},[113,1550,633],{"class":299},[113,1552,1553,1555,1557,1559,1561,1563,1565,1568,1570],{"class":115,"line":440},[113,1554,1453],{"class":163},[113,1556,288],{"class":123},[113,1558,469],{"class":233},[113,1560,268],{"class":299},[113,1562,474],{"class":436},[113,1564,477],{"class":123},[113,1566,1567],{"class":436}," 7",[113,1569,308],{"class":299},[113,1571,152],{"class":123},[113,1573,1574,1576,1578,1580,1582,1585,1587,1590,1592],{"class":115,"line":449},[113,1575,1453],{"class":163},[113,1577,288],{"class":123},[113,1579,469],{"class":233},[113,1581,268],{"class":299},[113,1583,1584],{"class":436},"7",[113,1586,477],{"class":123},[113,1588,1589],{"class":436}," 14",[113,1591,308],{"class":299},[113,1593,152],{"class":123},[113,1595,1596,1598,1600,1602,1604,1607,1609,1612,1614],{"class":115,"line":487},[113,1597,1453],{"class":163},[113,1599,288],{"class":123},[113,1601,469],{"class":233},[113,1603,268],{"class":299},[113,1605,1606],{"class":436},"14",[113,1608,477],{"class":123},[113,1610,1611],{"class":436}," 21",[113,1613,308],{"class":299},[113,1615,152],{"class":123},[113,1617,1618,1620,1622,1624,1626,1629,1631,1634,1636],{"class":115,"line":496},[113,1619,1453],{"class":163},[113,1621,288],{"class":123},[113,1623,469],{"class":233},[113,1625,268],{"class":299},[113,1627,1628],{"class":436},"21",[113,1630,477],{"class":123},[113,1632,1633],{"class":436}," 28",[113,1635,308],{"class":299},[113,1637,152],{"class":123},[113,1639,1640,1642,1644,1646,1648,1651,1653,1656,1658],{"class":115,"line":502},[113,1641,1453],{"class":163},[113,1643,288],{"class":123},[113,1645,469],{"class":233},[113,1647,268],{"class":299},[113,1649,1650],{"class":436},"28",[113,1652,477],{"class":123},[113,1654,1655],{"class":436}," 35",[113,1657,308],{"class":299},[113,1659,152],{"class":123},[113,1661,1662,1664,1666,1668,1670,1673,1675],{"class":115,"line":522},[113,1663,1453],{"class":163},[113,1665,288],{"class":123},[113,1667,469],{"class":233},[113,1669,268],{"class":299},[113,1671,1672],{"class":436},"35",[113,1674,308],{"class":299},[113,1676,152],{"class":123},[113,1678,1679,1682],{"class":115,"line":573},[113,1680,1681],{"class":299},"    ]",[113,1683,240],{"class":123},[113,1685,1686,1688,1690],{"class":115,"line":603},[113,1687,227],{"class":123},[113,1689,308],{"class":163},[113,1691,240],{"class":123},[95,1693,1695],{"id":1694},"advancing-the-calendar","Advancing the Calendar",[56,1697,1698],{},"I made a single function to move forward/backward by one month or year. If\nmoving back one month, \"0\" is passed in for the year (no change) and \"-1\" is\npassed in for the month.",[56,1700,1701],{},"One issue I didn't think about initially - if the selected date is January 31,\nfor example, and the user advanced one month, the calendar advanced to March 3\n(i.e. \"February 31\"). Therefore I had to set up a month length check. Now this\nexample will result in advancing to February 28 (or 29).",[103,1703,1705],{"className":105,"code":1704,"language":107,"meta":108,"style":108},"const dateChange = (year: number, month: number) => {\n  let tempdate\n  // CHECK LENGTH OF THE MONTH WE ARE ADVANCING TO\n  let newMonthLength =\n    32 - new Date(dateYear.value, dateMonthInt.value + month, 32).getDate()\n  if (year === 0 && dateDate.value > newMonthLength) {\n    tempdate = new Date(\n      new Date(\n        dateYear.value,\n        dateMonthInt.value + month,\n        newMonthLength\n      ).getTime() + tzOffset.value\n    )\n  } else {\n    tempdate = new Date(\n      new Date(\n        dateYear.value + year,\n        dateMonthInt.value + month,\n        dateDate.value\n      ).getTime() + tzOffset.value\n    )\n  }\n  context.emit('selected-date', tempdate)\n}\n",[110,1706,1707,1739,1746,1751,1761,1806,1838,1851,1860,1871,1886,1891,1913,1918,1928,1940,1948,1963,1977,1986,2004,2008,2013,2036],{"__ignoreMap":108},[113,1708,1709,1711,1714,1716,1718,1721,1723,1725,1727,1729,1731,1733,1735,1737],{"class":115,"line":116},[113,1710,218],{"class":217},[113,1712,1713],{"class":163}," dateChange ",[113,1715,262],{"class":123},[113,1717,960],{"class":123},[113,1719,1720],{"class":963},"year",[113,1722,124],{"class":123},[113,1724,598],{"class":119},[113,1726,477],{"class":123},[113,1728,399],{"class":963},[113,1730,124],{"class":123},[113,1732,598],{"class":119},[113,1734,308],{"class":123},[113,1736,274],{"class":217},[113,1738,127],{"class":123},[113,1740,1741,1743],{"class":115,"line":130},[113,1742,396],{"class":217},[113,1744,1745],{"class":163}," tempdate\n",[113,1747,1748],{"class":115,"line":140},[113,1749,1750],{"class":251},"  // CHECK LENGTH OF THE MONTH WE ARE ADVANCING TO\n",[113,1752,1753,1755,1758],{"class":115,"line":155},[113,1754,396],{"class":217},[113,1756,1757],{"class":163}," newMonthLength",[113,1759,1760],{"class":123}," =\n",[113,1762,1763,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1791,1793,1795,1797,1799,1801,1803],{"class":115,"line":169},[113,1764,1765],{"class":436},"    32",[113,1767,1160],{"class":123},[113,1769,1163],{"class":123},[113,1771,164],{"class":233},[113,1773,268],{"class":299},[113,1775,1170],{"class":163},[113,1777,288],{"class":123},[113,1779,291],{"class":163},[113,1781,477],{"class":123},[113,1783,1179],{"class":163},[113,1785,288],{"class":123},[113,1787,291],{"class":163},[113,1789,1790],{"class":123}," +",[113,1792,399],{"class":163},[113,1794,477],{"class":123},[113,1796,1157],{"class":436},[113,1798,308],{"class":299},[113,1800,288],{"class":123},[113,1802,539],{"class":233},[113,1804,1805],{"class":299},"()\n",[113,1807,1808,1811,1813,1815,1817,1819,1822,1825,1827,1829,1832,1834,1836],{"class":115,"line":175},[113,1809,1810],{"class":281},"  if",[113,1812,960],{"class":299},[113,1814,1720],{"class":163},[113,1816,433],{"class":123},[113,1818,1285],{"class":436},[113,1820,1821],{"class":123}," &&",[113,1823,1824],{"class":163}," dateDate",[113,1826,288],{"class":123},[113,1828,291],{"class":163},[113,1830,1831],{"class":123}," >",[113,1833,1757],{"class":163},[113,1835,567],{"class":299},[113,1837,1448],{"class":123},[113,1839,1840,1843,1845,1847,1849],{"class":115,"line":181},[113,1841,1842],{"class":163},"    tempdate",[113,1844,230],{"class":123},[113,1846,1163],{"class":123},[113,1848,164],{"class":233},[113,1850,1461],{"class":299},[113,1852,1853,1856,1858],{"class":115,"line":318},[113,1854,1855],{"class":123},"      new",[113,1857,164],{"class":233},[113,1859,1461],{"class":299},[113,1861,1862,1865,1867,1869],{"class":115,"line":338},[113,1863,1864],{"class":163},"        dateYear",[113,1866,288],{"class":123},[113,1868,291],{"class":163},[113,1870,152],{"class":123},[113,1872,1873,1876,1878,1880,1882,1884],{"class":115,"line":358},[113,1874,1875],{"class":163},"        dateMonthInt",[113,1877,288],{"class":123},[113,1879,291],{"class":163},[113,1881,1790],{"class":123},[113,1883,399],{"class":163},[113,1885,152],{"class":123},[113,1887,1888],{"class":115,"line":367},[113,1889,1890],{"class":163},"        newMonthLength\n",[113,1892,1893,1896,1898,1900,1902,1905,1908,1910],{"class":115,"line":373},[113,1894,1895],{"class":299},"      )",[113,1897,288],{"class":123},[113,1899,1480],{"class":233},[113,1901,542],{"class":299},[113,1903,1904],{"class":123},"+",[113,1906,1907],{"class":163}," tzOffset",[113,1909,288],{"class":123},[113,1911,1912],{"class":163},"value\n",[113,1914,1915],{"class":115,"line":393},[113,1916,1917],{"class":299},"    )\n",[113,1919,1920,1923,1926],{"class":115,"line":421},[113,1921,1922],{"class":123},"  }",[113,1924,1925],{"class":281}," else",[113,1927,127],{"class":123},[113,1929,1930,1932,1934,1936,1938],{"class":115,"line":440},[113,1931,1842],{"class":163},[113,1933,230],{"class":123},[113,1935,1163],{"class":123},[113,1937,164],{"class":233},[113,1939,1461],{"class":299},[113,1941,1942,1944,1946],{"class":115,"line":449},[113,1943,1855],{"class":123},[113,1945,164],{"class":233},[113,1947,1461],{"class":299},[113,1949,1950,1952,1954,1956,1958,1961],{"class":115,"line":487},[113,1951,1864],{"class":163},[113,1953,288],{"class":123},[113,1955,291],{"class":163},[113,1957,1790],{"class":123},[113,1959,1960],{"class":163}," year",[113,1962,152],{"class":123},[113,1964,1965,1967,1969,1971,1973,1975],{"class":115,"line":496},[113,1966,1875],{"class":163},[113,1968,288],{"class":123},[113,1970,291],{"class":163},[113,1972,1790],{"class":123},[113,1974,399],{"class":163},[113,1976,152],{"class":123},[113,1978,1979,1982,1984],{"class":115,"line":502},[113,1980,1981],{"class":163},"        dateDate",[113,1983,288],{"class":123},[113,1985,1912],{"class":163},[113,1987,1988,1990,1992,1994,1996,1998,2000,2002],{"class":115,"line":522},[113,1989,1895],{"class":299},[113,1991,288],{"class":123},[113,1993,1480],{"class":233},[113,1995,542],{"class":299},[113,1997,1904],{"class":123},[113,1999,1907],{"class":163},[113,2001,288],{"class":123},[113,2003,1912],{"class":163},[113,2005,2006],{"class":115,"line":573},[113,2007,1917],{"class":299},[113,2009,2010],{"class":115,"line":603},[113,2011,2012],{"class":123},"  }\n",[113,2014,2015,2017,2019,2021,2023,2025,2027,2029,2031,2034],{"class":115,"line":612},[113,2016,1017],{"class":163},[113,2018,288],{"class":123},[113,2020,1022],{"class":233},[113,2022,268],{"class":299},[113,2024,1027],{"class":123},[113,2026,196],{"class":195},[113,2028,1027],{"class":123},[113,2030,477],{"class":123},[113,2032,2033],{"class":163}," tempdate",[113,2035,1038],{"class":299},[113,2037,2038],{"class":115,"line":617},[113,2039,1043],{"class":123},[67,2041,2043],{"id":2042},"highlighting-dates","Highlighting Dates",[103,2045,2047],{"className":105,"code":2046,"language":107,"meta":108,"style":108},"// HIGHLIGHT THE SELECTED DATE IN RED\nconst isSelectedDate = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getDate() === date2.getDate()\n    ? 'bg-red-500 text-bold text-gray-200'\n    : ''\n}\n\n// HIGHLIGHT TODAY'S DATE IN BLUE\nconst isCurrentDate = (date: Date) => {\n  let today = new Date(Date.now())\n  return date.getFullYear() === today.getFullYear() &&\n    date.getMonth() === today.getMonth() &&\n    date.getDate() === today.getDate()\n    ? 'bg-blue-500 text-bold text-gray-200'\n    : ''\n}\n\n// MAKE DAYS OF CURRENTLY VIEWED MONTH BOLD, MAKE OTHERS LIGHTER\nconst isNotCurrentMonth = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth()\n    ? 'text-bold'\n    : 'text-gray-500'\n}\n",[110,2048,2049,2054,2087,2114,2137,2157,2170,2177,2181,2185,2190,2213,2239,2263,2285,2305,2316,2322,2326,2330,2335,2366,2390,2410,2421,2432],{"__ignoreMap":108},[113,2050,2051],{"class":115,"line":116},[113,2052,2053],{"class":251},"// HIGHLIGHT THE SELECTED DATE IN RED\n",[113,2055,2056,2058,2061,2063,2065,2068,2070,2072,2074,2077,2079,2081,2083,2085],{"class":115,"line":130},[113,2057,218],{"class":217},[113,2059,2060],{"class":163}," isSelectedDate ",[113,2062,262],{"class":123},[113,2064,960],{"class":123},[113,2066,2067],{"class":963},"date1",[113,2069,124],{"class":123},[113,2071,164],{"class":119},[113,2073,477],{"class":123},[113,2075,2076],{"class":963}," date2",[113,2078,124],{"class":123},[113,2080,164],{"class":119},[113,2082,308],{"class":123},[113,2084,274],{"class":217},[113,2086,127],{"class":123},[113,2088,2089,2091,2094,2096,2098,2100,2103,2105,2107,2109,2111],{"class":115,"line":140},[113,2090,282],{"class":281},[113,2092,2093],{"class":163}," date1",[113,2095,288],{"class":123},[113,2097,296],{"class":233},[113,2099,542],{"class":299},[113,2101,2102],{"class":123},"===",[113,2104,2076],{"class":163},[113,2106,288],{"class":123},[113,2108,296],{"class":233},[113,2110,542],{"class":299},[113,2112,2113],{"class":123},"&&\n",[113,2115,2116,2119,2121,2123,2125,2127,2129,2131,2133,2135],{"class":115,"line":155},[113,2117,2118],{"class":163},"    date1",[113,2120,288],{"class":123},[113,2122,351],{"class":233},[113,2124,542],{"class":299},[113,2126,2102],{"class":123},[113,2128,2076],{"class":163},[113,2130,288],{"class":123},[113,2132,351],{"class":233},[113,2134,542],{"class":299},[113,2136,2113],{"class":123},[113,2138,2139,2141,2143,2145,2147,2149,2151,2153,2155],{"class":115,"line":169},[113,2140,2118],{"class":163},[113,2142,288],{"class":123},[113,2144,539],{"class":233},[113,2146,542],{"class":299},[113,2148,2102],{"class":123},[113,2150,2076],{"class":163},[113,2152,288],{"class":123},[113,2154,539],{"class":233},[113,2156,1805],{"class":299},[113,2158,2159,2161,2164,2167],{"class":115,"line":175},[113,2160,443],{"class":123},[113,2162,2163],{"class":123}," '",[113,2165,2166],{"class":195},"bg-red-500 text-bold text-gray-200",[113,2168,2169],{"class":123},"'\n",[113,2171,2172,2174],{"class":115,"line":181},[113,2173,452],{"class":123},[113,2175,2176],{"class":123}," ''\n",[113,2178,2179],{"class":115,"line":318},[113,2180,1043],{"class":123},[113,2182,2183],{"class":115,"line":338},[113,2184,246],{"emptyLinePlaceholder":245},[113,2186,2187],{"class":115,"line":358},[113,2188,2189],{"class":251},"// HIGHLIGHT TODAY'S DATE IN BLUE\n",[113,2191,2192,2194,2197,2199,2201,2203,2205,2207,2209,2211],{"class":115,"line":367},[113,2193,218],{"class":217},[113,2195,2196],{"class":163}," isCurrentDate ",[113,2198,262],{"class":123},[113,2200,960],{"class":123},[113,2202,530],{"class":963},[113,2204,124],{"class":123},[113,2206,164],{"class":119},[113,2208,308],{"class":123},[113,2210,274],{"class":217},[113,2212,127],{"class":123},[113,2214,2215,2217,2220,2222,2224,2226,2228,2231,2233,2236],{"class":115,"line":373},[113,2216,396],{"class":217},[113,2218,2219],{"class":163}," today",[113,2221,230],{"class":123},[113,2223,1163],{"class":123},[113,2225,164],{"class":233},[113,2227,268],{"class":299},[113,2229,2230],{"class":163},"Date",[113,2232,288],{"class":123},[113,2234,2235],{"class":233},"now",[113,2237,2238],{"class":299},"())\n",[113,2240,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261],{"class":115,"line":393},[113,2242,282],{"class":281},[113,2244,285],{"class":163},[113,2246,288],{"class":123},[113,2248,296],{"class":233},[113,2250,542],{"class":299},[113,2252,2102],{"class":123},[113,2254,2219],{"class":163},[113,2256,288],{"class":123},[113,2258,296],{"class":233},[113,2260,542],{"class":299},[113,2262,2113],{"class":123},[113,2264,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283],{"class":115,"line":421},[113,2266,133],{"class":163},[113,2268,288],{"class":123},[113,2270,351],{"class":233},[113,2272,542],{"class":299},[113,2274,2102],{"class":123},[113,2276,2219],{"class":163},[113,2278,288],{"class":123},[113,2280,351],{"class":233},[113,2282,542],{"class":299},[113,2284,2113],{"class":123},[113,2286,2287,2289,2291,2293,2295,2297,2299,2301,2303],{"class":115,"line":440},[113,2288,133],{"class":163},[113,2290,288],{"class":123},[113,2292,539],{"class":233},[113,2294,542],{"class":299},[113,2296,2102],{"class":123},[113,2298,2219],{"class":163},[113,2300,288],{"class":123},[113,2302,539],{"class":233},[113,2304,1805],{"class":299},[113,2306,2307,2309,2311,2314],{"class":115,"line":449},[113,2308,443],{"class":123},[113,2310,2163],{"class":123},[113,2312,2313],{"class":195},"bg-blue-500 text-bold text-gray-200",[113,2315,2169],{"class":123},[113,2317,2318,2320],{"class":115,"line":487},[113,2319,452],{"class":123},[113,2321,2176],{"class":123},[113,2323,2324],{"class":115,"line":496},[113,2325,1043],{"class":123},[113,2327,2328],{"class":115,"line":502},[113,2329,246],{"emptyLinePlaceholder":245},[113,2331,2332],{"class":115,"line":522},[113,2333,2334],{"class":251},"// MAKE DAYS OF CURRENTLY VIEWED MONTH BOLD, MAKE OTHERS LIGHTER\n",[113,2336,2337,2339,2342,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364],{"class":115,"line":573},[113,2338,218],{"class":217},[113,2340,2341],{"class":163}," isNotCurrentMonth ",[113,2343,262],{"class":123},[113,2345,960],{"class":123},[113,2347,2067],{"class":963},[113,2349,124],{"class":123},[113,2351,164],{"class":119},[113,2353,477],{"class":123},[113,2355,2076],{"class":963},[113,2357,124],{"class":123},[113,2359,164],{"class":119},[113,2361,308],{"class":123},[113,2363,274],{"class":217},[113,2365,127],{"class":123},[113,2367,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388],{"class":115,"line":603},[113,2369,282],{"class":281},[113,2371,2093],{"class":163},[113,2373,288],{"class":123},[113,2375,296],{"class":233},[113,2377,542],{"class":299},[113,2379,2102],{"class":123},[113,2381,2076],{"class":163},[113,2383,288],{"class":123},[113,2385,296],{"class":233},[113,2387,542],{"class":299},[113,2389,2113],{"class":123},[113,2391,2392,2394,2396,2398,2400,2402,2404,2406,2408],{"class":115,"line":612},[113,2393,2118],{"class":163},[113,2395,288],{"class":123},[113,2397,351],{"class":233},[113,2399,542],{"class":299},[113,2401,2102],{"class":123},[113,2403,2076],{"class":163},[113,2405,288],{"class":123},[113,2407,351],{"class":233},[113,2409,1805],{"class":299},[113,2411,2412,2414,2416,2419],{"class":115,"line":617},[113,2413,443],{"class":123},[113,2415,2163],{"class":123},[113,2417,2418],{"class":195},"text-bold",[113,2420,2169],{"class":123},[113,2422,2423,2425,2427,2430],{"class":115,"line":623},[113,2424,452],{"class":123},[113,2426,2163],{"class":123},[113,2428,2429],{"class":195},"text-gray-500",[113,2431,2169],{"class":123},[113,2433,2434],{"class":115,"line":636},[113,2435,1043],{"class":123},[95,2437,2439],{"id":2438},"lastly-a-directive-to-highlight-on-hover","Lastly, a Directive to Highlight on Hover",[103,2441,2443],{"className":105,"code":2442,"language":107,"meta":108,"style":108},"directives: {\n  hover: {\n    beforeMount(el, binding) {\n      const { value = [] } = binding;\n      el.addEventListener(\"mouseenter\", () => {\n        el.classList.add(...value);\n      });\n      el.addEventListener(\"mouseleave\", () => {\n        el.classList.remove(...value);\n      });\n    },\n    unmounted(el, binding) {\n      el.removeEventListener(\"mouseenter\", binding);\n      el.removeEventListener(\"mouseleave\", binding);\n    },\n  },\n},\n////// and in the element above\nv-hover=\"['bg-blue-700', 'text-gray-300']\"\n",[110,2444,2445,2454,2463,2482,2505,2532,2558,2567,2592,2615,2623,2627,2644,2669,2693,2697,2701,2706,2711],{"__ignoreMap":108},[113,2446,2447,2450,2452],{"class":115,"line":116},[113,2448,2449],{"class":119},"directives",[113,2451,124],{"class":123},[113,2453,127],{"class":123},[113,2455,2456,2459,2461],{"class":115,"line":130},[113,2457,2458],{"class":119},"  hover",[113,2460,124],{"class":123},[113,2462,127],{"class":123},[113,2464,2465,2468,2470,2473,2475,2478,2480],{"class":115,"line":140},[113,2466,2467],{"class":233},"    beforeMount",[113,2469,268],{"class":299},[113,2471,2472],{"class":163},"el",[113,2474,477],{"class":123},[113,2476,2477],{"class":163}," binding",[113,2479,567],{"class":299},[113,2481,1448],{"class":123},[113,2483,2484,2487,2489,2492,2494,2497,2499,2501,2503],{"class":115,"line":155},[113,2485,2486],{"class":217},"      const",[113,2488,221],{"class":123},[113,2490,2491],{"class":163}," value",[113,2493,230],{"class":123},[113,2495,2496],{"class":299}," [] ",[113,2498,227],{"class":123},[113,2500,230],{"class":123},[113,2502,2477],{"class":163},[113,2504,240],{"class":123},[113,2506,2507,2510,2512,2515,2517,2519,2522,2524,2526,2528,2530],{"class":115,"line":169},[113,2508,2509],{"class":163},"      el",[113,2511,288],{"class":123},[113,2513,2514],{"class":233},"addEventListener",[113,2516,268],{"class":299},[113,2518,192],{"class":123},[113,2520,2521],{"class":195},"mouseenter",[113,2523,192],{"class":123},[113,2525,477],{"class":123},[113,2527,904],{"class":123},[113,2529,274],{"class":217},[113,2531,127],{"class":123},[113,2533,2534,2537,2539,2542,2544,2547,2549,2552,2554,2556],{"class":115,"line":175},[113,2535,2536],{"class":163},"        el",[113,2538,288],{"class":123},[113,2540,2541],{"class":163},"classList",[113,2543,288],{"class":123},[113,2545,2546],{"class":233},"add",[113,2548,268],{"class":299},[113,2550,2551],{"class":123},"...",[113,2553,291],{"class":163},[113,2555,308],{"class":299},[113,2557,240],{"class":123},[113,2559,2560,2563,2565],{"class":115,"line":181},[113,2561,2562],{"class":123},"      }",[113,2564,308],{"class":299},[113,2566,240],{"class":123},[113,2568,2569,2571,2573,2575,2577,2579,2582,2584,2586,2588,2590],{"class":115,"line":318},[113,2570,2509],{"class":163},[113,2572,288],{"class":123},[113,2574,2514],{"class":233},[113,2576,268],{"class":299},[113,2578,192],{"class":123},[113,2580,2581],{"class":195},"mouseleave",[113,2583,192],{"class":123},[113,2585,477],{"class":123},[113,2587,904],{"class":123},[113,2589,274],{"class":217},[113,2591,127],{"class":123},[113,2593,2594,2596,2598,2600,2602,2605,2607,2609,2611,2613],{"class":115,"line":338},[113,2595,2536],{"class":163},[113,2597,288],{"class":123},[113,2599,2541],{"class":163},[113,2601,288],{"class":123},[113,2603,2604],{"class":233},"remove",[113,2606,268],{"class":299},[113,2608,2551],{"class":123},[113,2610,291],{"class":163},[113,2612,308],{"class":299},[113,2614,240],{"class":123},[113,2616,2617,2619,2621],{"class":115,"line":358},[113,2618,2562],{"class":123},[113,2620,308],{"class":299},[113,2622,240],{"class":123},[113,2624,2625],{"class":115,"line":367},[113,2626,172],{"class":123},[113,2628,2629,2632,2634,2636,2638,2640,2642],{"class":115,"line":373},[113,2630,2631],{"class":233},"    unmounted",[113,2633,268],{"class":299},[113,2635,2472],{"class":163},[113,2637,477],{"class":123},[113,2639,2477],{"class":163},[113,2641,567],{"class":299},[113,2643,1448],{"class":123},[113,2645,2646,2648,2650,2653,2655,2657,2659,2661,2663,2665,2667],{"class":115,"line":393},[113,2647,2509],{"class":163},[113,2649,288],{"class":123},[113,2651,2652],{"class":233},"removeEventListener",[113,2654,268],{"class":299},[113,2656,192],{"class":123},[113,2658,2521],{"class":195},[113,2660,192],{"class":123},[113,2662,477],{"class":123},[113,2664,2477],{"class":163},[113,2666,308],{"class":299},[113,2668,240],{"class":123},[113,2670,2671,2673,2675,2677,2679,2681,2683,2685,2687,2689,2691],{"class":115,"line":421},[113,2672,2509],{"class":163},[113,2674,288],{"class":123},[113,2676,2652],{"class":233},[113,2678,268],{"class":299},[113,2680,192],{"class":123},[113,2682,2581],{"class":195},[113,2684,192],{"class":123},[113,2686,477],{"class":123},[113,2688,2477],{"class":163},[113,2690,308],{"class":299},[113,2692,240],{"class":123},[113,2694,2695],{"class":115,"line":440},[113,2696,172],{"class":123},[113,2698,2699],{"class":115,"line":449},[113,2700,178],{"class":123},[113,2702,2703],{"class":115,"line":487},[113,2704,2705],{"class":123},"},\n",[113,2707,2708],{"class":115,"line":496},[113,2709,2710],{"class":251},"////// and in the element above\n",[113,2712,2713,2716,2719,2722,2724,2726,2729],{"class":115,"line":502},[113,2714,2715],{"class":163},"v",[113,2717,2718],{"class":123},"-",[113,2720,2721],{"class":163},"hover",[113,2723,262],{"class":123},[113,2725,192],{"class":123},[113,2727,2728],{"class":195},"['bg-blue-700', 'text-gray-300']",[113,2730,2731],{"class":123},"\"\n",[95,2733,2735],{"id":2734},"summary","Summary",[56,2737,2738],{},"I really enjoyed this little challenge! It was great practice in several areas -\ndirectives, JavaScript date functions, and TypeScript.",[56,2740,2741],{},"Perhaps someone else will find a use for my datepicker!",[2743,2744,2745],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":108,"searchDepth":130,"depth":130,"links":2747},[2748,2749,2750,2760],{"id":69,"depth":130,"text":70},{"id":76,"depth":130,"text":77},{"id":89,"depth":130,"text":90,"children":2751},[2752,2753,2754,2755,2756,2757,2758,2759],{"id":97,"depth":140,"text":98},{"id":206,"depth":140,"text":207},{"id":865,"depth":140,"text":866},{"id":939,"depth":140,"text":940},{"id":1046,"depth":140,"text":1047},{"id":1116,"depth":140,"text":1117},{"id":1317,"depth":140,"text":1318},{"id":1694,"depth":140,"text":1695},{"id":2042,"depth":130,"text":2043,"children":2761},[2762,2763],{"id":2438,"depth":140,"text":2439},{"id":2734,"depth":140,"text":2735},"2022-01-25T00:00:00.000Z","Continuing to work on my rebuild of the GPX app, I decided to build my own datepicker using Vue 3, Bootstrap 5, and TypeScript","md","https://images.unsplash.com/photo-1506784926709-22f1ec395907?q=80&w=1468&auto=format&fit=crop",{},{"title":34,"description":2765},"siXa01R8eP4OZqBVI2J98defDaedpYcleuBa407XUyY",[2772,2774],{"title":30,"path":31,"stem":32,"description":2773,"children":-1},"Learning Ember for work, rebuilding GPX app with Vue and TypeScript",{"title":38,"path":39,"stem":40,"description":2775,"children":-1},"A lot has happened since my last post",1772990059429]