playbook_ui 15.4.0.pre.rc.4 → 15.5.0.pre.alpha.PLAY2503datepickerdefaultdateoutsideminmaxrange12814

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -70,22 +70,36 @@
   <%= javascript_tag do %>
     (function() {
       const loadDatePicker = () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-        if (<%= object.selection_type == "quickpick" %>) {
-          document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-            const startDate = document.getElementById("<%= object.start_date_id %>")
-            const endDate = document.getElementById("<%= object.end_date_id %>")
-            const splittedValue = target.value.split(" to ")
-            startDate.value = splittedValue[0]
-            endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-          })
+          if (<%= object.selection_type == "quickpick" %>) {
+            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+              const startDate = document.getElementById("<%= object.start_date_id %>")
+              const endDate = document.getElementById("<%= object.end_date_id %>")
+              const splittedValue = target.value.split(" to ")
+              startDate.value = splittedValue[0]
+              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+            })
+          }
         }
       }
 
-      window.addEventListener("DOMContentLoaded", () => {
+      // Try to initialize immediately if DOM is ready
+      if (document.readyState === "loading") {
+        window.addEventListener("DOMContentLoaded", loadDatePicker)
+      } else {
         loadDatePicker()
-      })
+      }
+
+      // For dynamically added content (modals, etc.), check again after a brief delay
+      setTimeout(() => {
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          loadDatePicker();
+        }
+      }, 100);
 
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", () => {

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -251,4 +251,28 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
   })
+
+
+  test('displays defaultDate when it is later than maxDate', async () => {
+    const testId = 'datepicker-out-of-range-after'
+    const futureDateString = '01/15/2020'
+    const maxDateString = '01/10/2020'
+    
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={futureDateString}
+          format="m/d/Y"
+          maxDate={maxDateString}
+          pickerId="date-picker-out-of-range-after"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+
+    await waitFor(() => {
+      expect(input).toHaveValue('01/15/2020')
+    }, { timeout: 5000 })
+  })
 })

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -182,6 +182,33 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  const positionCalendarIfNeeded = (fp: Instance) => {
+    const cal = document.querySelector(`#cal-${pickerId}`) as HTMLElement
+    if (!cal) return
+
+    const inputRect = fp.input.getBoundingClientRect()
+    const h = cal.getBoundingClientRect().height || 300
+    const spaceBelow = window.innerHeight - inputRect.bottom
+    const spaceAbove = inputRect.top
+
+    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+      if (staticPosition) {
+        cal.style.top = 'auto'
+        cal.style.bottom = 'calc(100% + 5px)'
+      } else {
+        cal.style.position = 'fixed'
+        cal.style.top = `${Math.max(10, inputRect.top - h - 5)}px`
+        cal.style.left = `${inputRect.left}px`
+      }
+    } else if (staticPosition) {
+      cal.style.top = ''
+      cal.style.bottom = ''
+    } else {
+      Object.assign(cal.style, { position: '', top: '', left: '', bottom: '', right: '', transform: '' })
+      fp._positionCalendar()
+    }
+  }
+
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
 
@@ -239,12 +266,89 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  // Store resize / position handler reference for cleanup
+  let resizeRepositionHandlerRef: (() => void) | null = null
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
 
   const { setMinDate, setMaxDate } = getMinMaxDates()
 
+  // Default Date + Min/Max Date Initialization Helper Functions section ----/
+  const toDateObject = (dateValue: any): Date | null => {
+    if (!dateValue) return null
+    if (dateValue instanceof Date) return dateValue
+    if (typeof dateValue === 'string') {
+      const parsed = new Date(dateValue)
+      return isNaN(parsed.getTime()) ? null : parsed
+    }
+    if (typeof dateValue === 'number') {
+      return new Date(dateValue)
+    }
+    return null
+  }
+
+  // Formatting Date for Flatpickr
+  const formatDateForFlatpickr = (dateValue: any): string | null => {
+    const dateObj = toDateObject(dateValue)
+    if (!dateObj) return null
+    
+    const year = dateObj.getFullYear()
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0')
+    const day = String(dateObj.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+  }
+
+  // Helper to check if defaultDate is earlier than minDate
+  const isDefaultDateBeforeMinDate = (defaultDateValue: any, minDateValue: any): boolean => {
+    if (!defaultDateValue || !minDateValue) return false
+    
+    const defaultDateObj = toDateObject(defaultDateValue)
+    const minDateObj = toDateObject(minDateValue)
+    
+    if (!defaultDateObj || !minDateObj) return false
+
+    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
+    const minDateOnly = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate())
+    
+    return defaultDateOnly < minDateOnly
+  }
+
+  // Helper to check if defaultDate is later than maxDate
+  const isDefaultDateAfterMaxDate = (defaultDateValue: any, maxDateValue: any): boolean => {
+    if (!defaultDateValue || !maxDateValue) return false
+    
+    const defaultDateObj = toDateObject(defaultDateValue)
+    const maxDateObj = toDateObject(maxDateValue)
+    
+    if (!defaultDateObj || !maxDateObj) return false
+    
+    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
+    const maxDateOnly = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate())
+    
+    return defaultDateOnly > maxDateOnly
+  }
+
+  const defaultDateValue: any = defaultDateGetter()
+  // Only check for and out-of-range if user actually provided minDate/maxDate constraints
+  const isBeforeMin = minDate && isDefaultDateBeforeMinDate(defaultDateValue, setMinDate)
+  const isAfterMax = maxDate && isDefaultDateAfterMaxDate(defaultDateValue, setMaxDate)
+  
+  // Store these values for use in onClose handler
+  const hasOutOfRangeDefault = (isBeforeMin || isAfterMax) && defaultDateValue
+  
+  // Temporarily adjust minDate/maxDate to allow defaultDate to render if it's out of range via user provided minDate/maxDate constraints
+  const effectiveMinDate = isBeforeMin && defaultDateValue && minDate
+    ? formatDateForFlatpickr(defaultDateValue) || setMinDate
+    : setMinDate
+  
+  const effectiveMaxDate = isAfterMax && defaultDateValue && maxDate
+    ? formatDateForFlatpickr(defaultDateValue) || setMaxDate
+    : setMaxDate
+  
+  // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
+  
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -256,18 +360,68 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: setMaxDate,
-    minDate: setMinDate,
+    maxDate: effectiveMaxDate,
+    minDate: effectiveMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
-    onOpen: [() => {
+    onOpen: [(_selectedDates, _dateStr, fp) => {
+      // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
+      if (hasOutOfRangeDefault) {
+        const dateObj = toDateObject(defaultDateValue)
+        if (dateObj) {
+          const inputIsBlank = !fp.input.value || fp.input.value.trim() === ''
+          const noSelection = !fp.selectedDates || fp.selectedDates.length === 0
+          
+          if (inputIsBlank || noSelection) {
+            const formattedDate = fp.formatDate(dateObj, getDateFormat())
+            if (formattedDate) {
+              fp.input.value = formattedDate
+            }
+            fp.selectedDates = [dateObj]
+            fp.jumpToDate(dateObj)
+            setTimeout(() => {
+              yearChangeHook(fp)
+            }, 0)
+          }
+        }
+      }
+      
       calendarResizer()
-      window.addEventListener('resize', calendarResizer)
+      if (resizeRepositionHandlerRef) {
+        window.removeEventListener('resize', resizeRepositionHandlerRef)
+      }
+      resizeRepositionHandlerRef = () => {
+        calendarResizer()
+        positionCalendarIfNeeded(fp)
+      }
+      window.addEventListener('resize', resizeRepositionHandlerRef)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
+      positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr) => {
-      window.removeEventListener('resize', calendarResizer)
+    onClose: [(selectedDates, dateStr, fp) => {
+      if (resizeRepositionHandlerRef) {
+        window.removeEventListener('resize', resizeRepositionHandlerRef)
+        resizeRepositionHandlerRef = null
+      }
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      
+      // If defaultDate was out of range and no date was selected, preserve the default date
+      if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
+        const dateObj = toDateObject(defaultDateValue)
+        if (dateObj && fp.input) {
+          const formattedDate = fp.formatDate(dateObj, getDateFormat())
+          if (formattedDate) {
+            setTimeout(() => {
+              if (fp.input && (!fp.selectedDates || fp.selectedDates.length === 0)) {
+                fp.input.value = formattedDate
+                fp.selectedDates = [dateObj]
+                fp.jumpToDate(dateObj)
+              }
+            }, 0)
+          }
+        }
+      }
+      
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
@@ -289,6 +443,71 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
+  // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
+  if ((isBeforeMin || isAfterMax) && defaultDateValue) {
+    const dateObj = toDateObject(defaultDateValue)
+    const formattedDate = dateObj ? picker.formatDate(dateObj, getDateFormat()) : null
+    
+    setTimeout(() => {
+      if (!dateObj || !picker.input || !formattedDate) return
+
+      picker.setDate(dateObj, false)
+
+      if (isBeforeMin && setMinDate && minDate) {
+        picker.set('minDate', setMinDate)
+      }
+      if (isAfterMax && setMaxDate && maxDate) {
+        picker.set('maxDate', setMaxDate)
+      }
+      picker.input.value = formattedDate
+
+      picker.selectedDates = [dateObj]
+      
+      setTimeout(() => {
+        yearChangeHook(picker)
+      }, 0)
+      
+      // Restore function for out-of-range default dates
+      const restoreOutOfRangeValue = () => {
+        if (!picker.input) return
+        
+        const inputIsBlank = !picker.input.value || picker.input.value.trim() === ''
+        const noSelection = !picker.selectedDates || picker.selectedDates.length === 0
+        
+        if (inputIsBlank || noSelection) {
+          setTimeout(() => {
+            if (picker.input && (!picker.input.value || picker.input.value.trim() === '')) {
+              picker.input.value = formattedDate
+            }
+            if (!picker.selectedDates || picker.selectedDates.length === 0) {
+              picker.selectedDates = [dateObj]
+              if (picker.isOpen) {
+                picker.jumpToDate(dateObj)
+                picker.redraw()
+                setTimeout(() => {
+                  yearChangeHook(picker)
+                }, 0)
+              }
+            }
+          }, 0)
+        }
+      }
+      
+      const originalClear = picker.clear.bind(picker)
+      picker.clear = function(...args: any[]) {
+        const result = originalClear(...args)
+        setTimeout(() => restoreOutOfRangeValue(), 0)
+        return result
+      }
+
+      picker.input.addEventListener('input', restoreOutOfRangeValue)
+      
+      picker.config.onClose.push(() => {
+        restoreOutOfRangeValue()
+      })
+    }, 10)
+  }
+
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb

@@ -11,4 +11,22 @@
   max_date: "10/20/2020",
   min_date: "10/10/2020",
   picker_id: "date-picker-min-max2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/Y",
+  label: "Default date earlier than min_date (preserved)",
+  default_date: (DateTime.current - 3.days).utc.iso8601,
+  min_date: (DateTime.current - 1.day).utc.iso8601,
+  max_date: (DateTime.current + 7.days).utc.iso8601,
+  picker_id: "date-picker-min-max-default-before"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/Y",
+  label: "Default date later than max_date (preserved)",
+  default_date: (DateTime.current + 10.days).utc.iso8601,
+  min_date: (DateTime.current - 1.day).utc.iso8601,
+  max_date: (DateTime.current + 7.days).utc.iso8601,
+  picker_id: "date-picker-min-max-default-after"
 }) %>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -19,6 +19,7 @@ type DateRangeInlineProps = {
   icon?: boolean;
   id?: string;
   size?: "sm" | "xs";
+  showCurrentYear?: boolean;
   startDate?: Date;
 };
 
@@ -45,6 +46,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     icon = false,
     size = "sm",
     startDate,
+    showCurrentYear = false,
   } = props;
 
   const dateInCurrentYear = () => {
@@ -60,13 +62,10 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   
   const renderTime = (date: Date) => {
+    const includeYear = showCurrentYear || !dateInCurrentYear();
     return (
       <time dateTime={dateTimeIso(date)}>
-        {dateInCurrentYear() ? (
-          ` ${dateTimestamp(date, false)} `
-        ) : (
-          ` ${dateTimestamp(date, true)} `
-        )}
+        {` ${dateTimestamp(date, includeYear)} `}
       </time>
     );
   };
@@ -83,7 +82,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             {icon && (
               <Caption 
                   dark={dark} 
-                  tag="span">
+                  tag="span"
+              >
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -96,12 +96,14 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -112,7 +114,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -124,7 +127,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
               <Body 
                   color={"light"} 
                   dark={dark}
-                  tag="span">
+                  tag="span"
+              >
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -137,13 +141,15 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Body 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
             <Body 
                 color={"light"} 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -154,7 +160,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Body>
             <Body 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -14,7 +14,8 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       def classname
         generate_classname("pb_date_range_inline_kit", dark_class, align)
       end
@@ -38,11 +39,12 @@ module Playbook
       end
 
       def time_display(time)
+        include_year = show_current_year || !dates_in_current_year?
         content_tag(:time, datetime: time.to_iso) do
-          if dates_in_current_year?
-            "#{time.to_month_downcase} #{time.to_day}"
-          else
+          if include_year
             "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
+          else
+            "#{time.to_month_downcase} #{time.to_day}"
           end
         end
       end

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -111,6 +111,23 @@ describe("DateRangeInline Kit", () => {
         const text = kit.querySelector('.pb_caption_kit_md:first-child')
         expect(text.textContent).toEqual(" Jan 15 ")
     })
+
+    test("renders DateRangeInline with year when showCurrentYear is true", () => {
+        const currentYear = new Date().getFullYear()
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date((`15 Aug ${currentYear}`))}
+                showCurrentYear
+                size="xs"
+                startDate={new Date(`15 Jan ${currentYear}`)}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(` Jan 15, ${currentYear} `)
+    })
     
 
 })

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, show_current_year: true }) %>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import DateRangeInline from '../_date_range_inline'
+
+const DateRangeInlineShowCurrentYear = (props) => {
+  return (
+    <div>
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateRangeInlineShowCurrentYear

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md

@@ -1 +1 @@
-Use to display a date range. Year will not show if it is the current year.
+Use to display a date range.

data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml

@@ -2,11 +2,12 @@ examples:
   
   rails:
   - date_range_inline_default: Default
-  
+  - date_range_inline_show_current_year: Show Current Year
   
   react:
   - date_range_inline_default: Default
-
+  - date_range_inline_show_current_year: Show Current Year
+  
   swift:
   - date_range_inline_default_swift: Default
   - date_range_inline_props_swift: ""

data/app/pb_kits/playbook/pb_date_range_inline/docs/index.js

@@ -1 +1,2 @@
 export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
+export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -19,6 +19,7 @@ type DateStackedProps = {
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
+  showCurrentYear?: boolean;
 };
 
 const sizes: {sm: 4, md: 3} = {
@@ -37,6 +38,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
     data={},
     htmlOptions={},
     size = "sm",
+    showCurrentYear = false,
   } = props;
   const classes = classnames(
     buildCss("pb_date_stacked_kit", align, size, {
@@ -55,7 +57,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
   return (
     <>
       {bold == false ? (
-        <div 
+        <div
             {...dataProps}
             {...htmlProps}
             className={classes}
@@ -68,10 +70,10 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                 text={DateTime.toDay(date).toString()}
             />
           </div>
-          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
+          {(currentYear != inputYear || showCurrentYear) && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div 
+          <div
               {...dataProps}
               {...htmlProps}
               className={classes}
@@ -89,7 +91,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                   size="4"
                   text={DateTime.toDay(date).toString()}
               />
-              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
+              {(currentYear != inputYear || showCurrentYear) && <Title size="4">{inputYear}</Title>}
             </div>
           </div>
       )}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -4,16 +4,15 @@
 
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("caption", props: { text: object.month }) %>
-        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) %>
         <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
       </div>
 
     <% else %>
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
-        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) %>
         <%= pb_rails("title", props: { text: object.year, size:4 }) %>
-
       </div>
 
     <% end %>