diff --git a/Library/0BDFDB.plugin.js b/Library/0BDFDB.plugin.js
index eedd26f850..d35eb0dd9e 100644
--- a/Library/0BDFDB.plugin.js
+++ b/Library/0BDFDB.plugin.js
@@ -5623,21 +5623,25 @@ module.exports = (_ => {
 							animation: InternalComponents.LibraryComponents.PopoutContainer.Animation.SCALE,
 							position: InternalComponents.LibraryComponents.PopoutContainer.Positions.TOP,
 							align: InternalComponents.LibraryComponents.PopoutContainer.Align.RIGHT,
-							renderPopout: _ => BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.Flex, {
-								align: InternalComponents.LibraryComponents.Flex.Align.CENTER,
-								children: [
-									props.name && BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.SettingsLabel, {
-										label: props.name
-									}),
-									BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.TextInput, {
-										className: BDFDB.disCN.dateinputfield,
-										placeholder: props.string,
-										value: props.string,
-										onChange: typeof props.onChange == "function" ? props.onChange : null
-									}),
-									this.renderInfoButton(props.tooltipText)
-								].filter(n => n)
-							}),
+							onClose: instance => BDFDB.DOMUtils.removeClass(instance.domElementRef.current, BDFDB.disCN.dateinputbuttonselected),
+							renderPopout: _ => {
+								BDFDB.DOMUtils.addClass(instance.domElementRef.current, BDFDB.disCN.dateinputbuttonselected);
+								return BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.Flex, {
+									align: InternalComponents.LibraryComponents.Flex.Align.CENTER,
+									children: [
+										props.name && BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.SettingsLabel, {
+											label: props.name
+										}),
+										BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.TextInput, {
+											className: BDFDB.disCN.dateinputfield,
+											placeholder: props.string,
+											value: props.string,
+											onChange: typeof props.onChange == "function" ? props.onChange : null
+										}),
+										this.renderInfoButton(props.tooltipText)
+									].filter(n => n)
+								})
+							},
 							children: props.name ? BDFDB.ReactUtils.createElement(InternalComponents.LibraryComponents.TooltipContainer, {
 								text: props.name,
 								children: button
diff --git a/Library/_res/BDFDB.data.json b/Library/_res/BDFDB.data.json
index 20e2747ff6..869d0599d4 100644
--- a/Library/_res/BDFDB.data.json
+++ b/Library/_res/BDFDB.data.json
@@ -572,6 +572,7 @@
 			"colorPickerSwatchSingleWrapper": "swatch-7FsRaa",
 			"confirmModal": "confirmModal-t-WDWJ",
 			"dateInputButton": "dateInputButton-jTGUJg",
+			"dateInputButtonSelected": "selected-8F23Ra",
 			"dateInputControls": "dateInputControls-cgfPf9",
 			"dateInputField": "dateInputField-2vhGP1",
 			"dateInputInner": "dateInputInner-ORXFwT",
@@ -1826,6 +1827,7 @@
 		"customstatusitememoji": ["CustomStatusPopout", "customEmoji"],
 		"customstatusmodal": ["CustomStatusModal", "modalRoot"],
 		"dateinputbutton": ["BDFDB", "dateInputButton"],
+		"dateinputbuttonselected": ["BDFDB", "dateInputButtonSelected"],
 		"dateinputcontrols": ["BDFDB", "dateInputControls"],
 		"dateinputfield": ["BDFDB", "dateInputField"],
 		"dateinputinner": ["BDFDB", "dateInputInner"],
diff --git a/Library/_res/BDFDB.raw.css b/Library/_res/BDFDB.raw.css
index c0c04b5711..d0eb9059de 100644
--- a/Library/_res/BDFDB.raw.css
+++ b/Library/_res/BDFDB.raw.css
@@ -883,6 +883,10 @@ img:not([src]), img[src=""], img[src="null"] {
 [REPLACE_CLASS_dateinputbutton] {
 	margin-left: 8px;
 }
+[REPLACE_CLASS_dateinputbuttonselected] [REPLACE_CLASS_svgicon],
+[REPLACE_CLASS_dateinputbuttonselected] [REPLACE_CLASS_svgicon]:hover {
+	color: var(--interactive-active);
+}
 
 [REPLACE_CLASS_inputnumberwrapper] {
 	position: relative;