diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 1d99089c6b4..f207104c756 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -13,6 +13,7 @@
 - Fix `n-color-picker` can't input 0 as unit's value, closes [#2680](https://github.com/TuSimple/naive-ui/issues/2680).
 - Fix `n-tree`'s scrollbar overflows in virtual scroll mode, closes [#2673](https://github.com/TuSimple/naive-ui/issues/2673).
 - Fix `n-layout-sider`'s `content-style` can't override `overflow: auto` prop, closes [#2671](https://github.com/TuSimple/naive-ui/issues/2671).
+- Fix `n-date-picker` displays panel item abnormally with `month` and `quarter` type in dark mode.
 
 ### Feats
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 06ecbf327c1..4dbb1084f3a 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -13,6 +13,7 @@
 - 修复 `n-color-picker` 不能输入 0 作为单位的值，关闭 [#2680](https://github.com/TuSimple/naive-ui/issues/2680)
 - 修复 `n-tree` 再使用虚拟滚动时滚动条长度存在问题，关闭 [#2673](https://github.com/TuSimple/naive-ui/issues/2673)
 - 修复 `n-layout-sider` 的 `content-style` 不能覆盖 `overflow: auto` 属性，关闭 [#2671](https://github.com/TuSimple/naive-ui/issues/2671)
+- 修复 `n-date-picker` 在 `month` 和 `quarter` 模式下暗黑模式的 disabled 的面板时间显示有问题
 
 ### Feats
 
diff --git a/src/date-picker/src/styles/index.cssr.ts b/src/date-picker/src/styles/index.cssr.ts
index 892a12f3943..3b3c9c74b31 100644
--- a/src/date-picker/src/styles/index.cssr.ts
+++ b/src/date-picker/src/styles/index.cssr.ts
@@ -154,9 +154,15 @@ export default c([
           ])
         ]),
         cM('disabled', `
-          background-color: var(--n-item-color-disabled);
+          color: var(--n-item-text-color-disabled);
           cursor: not-allowed;
-        `)
+        `, [
+          cM('selected', [
+            c('&::before', `
+              background-color: var(--n-item-color-disabled);
+            `)
+          ])
+        ])
       ])
     ]),
     cM('date', {