Merge pull request #5989 from liferay/LPD-52104

 fix(@clayui/@date-picker): LPD-51204 Bug selected year not displaying and year menu wrapping years to multiple lines

Author: matuzalemsteles

packages/clay-date-picker/docs/date-picker.mdx

@@ -47,7 +47,7 @@ export default function App() {
 					placeholder="YYYY-MM-DD"
 					value={value}
 					years={{
-						end: 2024,
+						end: new Date().getFullYear(),
 						start: 1997,
 					}}
 				/>
@@ -81,7 +81,7 @@ export default function App() {
 					timezone="GMT+01:00"
 					value={value}
 					years={{
-						end: 2024,
+						end: new Date().getFullYear(),
 						start: 2008,
 					}}
 				/>
@@ -123,7 +123,7 @@ export default function App() {
 					range
 					value={value}
 					years={{
-						end: 2024,
+						end: new Date().getFullYear(),
 						start: 1997,
 					}}
 				/>
@@ -172,7 +172,7 @@ export default function App() {
 					value={value}
 					weekdaysShort={['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']}
 					years={{
-						end: 2024,
+						end: new Date().getFullYear(),
 						start: 2008,
 					}}
 				/>
@@ -221,7 +221,7 @@ export default function App() {
 					placeholder="YYYY-MM-DD"
 					value={value}
 					years={{
-						end: 2024,
+						end: new Date().getFullYear(),
 						start: 2008,
 					}}
 				/>

packages/clay-date-picker/src/DateNavigation.tsx

@@ -111,7 +111,7 @@ const ClayDatePickerDateNavigation = ({
 							)
 						}
 						selectedKey={String(currentMonth.getFullYear())}
-						width={85}
+						width={95}
 					>
 						{(item) => (
 							<Option key={item.value}>

packages/clay-date-picker/stories/DatePicker.stories.tsx

@@ -46,8 +46,8 @@ export const Default = () => (
 	<ClayDatePickerWithState
 		placeholder="YYYY-MM-DD"
 		years={{
-			end: 2024,
-			start: 1997,
+			end: new Date().getFullYear(),
+			start: 1998,
 		}}
 	/>
 );
@@ -57,8 +57,8 @@ export const Disabled = () => (
 		disabled
 		placeholder="YYYY-MM-DD"
 		years={{
-			end: 2024,
-			start: 1997,
+			end: new Date().getFullYear(),
+			start: 1998,
 		}}
 	/>
 );
@@ -70,8 +70,8 @@ export const Time = (args: any) => (
 		timezone="GMT+01:00"
 		use12Hours={args.use12Hours}
 		years={{
-			end: 2024,
-			start: 1997,
+			end: new Date().getFullYear(),
+			start: 1998,
 		}}
 	/>
 );
@@ -103,8 +103,8 @@ export const Locale = () => (
 		timezone="GMT+03:00"
 		weekdaysShort={['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']}
 		years={{
-			end: 2024,
-			start: 1997,
+			end: new Date().getFullYear(),
+			start: 1998,
 		}}
 	/>
 );
@@ -127,8 +127,8 @@ export const CustomExpand = () => {
 				placeholder="YYYY-MM-DD"
 				value={value}
 				years={{
-					end: 2024,
-					start: 1997,
+					end: new Date().getFullYear(),
+					start: 1998,
 				}}
 			/>
 		</>
@@ -145,8 +145,8 @@ export const DateRange = () => (
 		placeholder="YYYY/MM/DD - YYYY/MM/DD"
 		range
 		years={{
-			end: 2024,
-			start: 1997,
+			end: new Date().getFullYear(),
+			start: 1998,
 		}}
 	/>
 );