From 982eb8e6c69242670ba593e0c375088527b5fe0c Mon Sep 17 00:00:00 2001
From: RYGRIT <ry_grit@sina.com>
Date: Wed, 11 Feb 2026 13:03:13 +0800
Subject: [PATCH 1/2] fix(trends): prevent date input from being disabled while
 typing

---
 app/components/Package/TrendsChart.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index a1e4158c9..acb711c43 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1433,6 +1433,7 @@ watch(selectedMetric, value => {
           v-if="showFacetSelector"
           id="trends-metric-select"
           v-model="selectedMetric"
+          :disabled="activeMetricState.pending"
           :items="METRICS.map(m => ({ label: m.label, value: m.id }))"
           :label="$t('package.trends.facet')"
         />
@@ -1466,7 +1467,6 @@ watch(selectedMetric, value => {
               <InputBase
                 id="startDate"
                 v-model="startDate"
-                :disabled="activeMetricState.pending"
                 type="date"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
@@ -1486,7 +1486,6 @@ watch(selectedMetric, value => {
               <InputBase
                 id="endDate"
                 v-model="endDate"
-                :disabled="activeMetricState.pending"
                 type="date"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"

From 9efce428b2c15f5a8814bcf3063b699b78431d12 Mon Sep 17 00:00:00 2001
From: RYGRIT <ry_grit@sina.com>
Date: Wed, 11 Feb 2026 18:04:42 +0800
Subject: [PATCH 2/2] fix: restrict date input to 4-digit years

---
 app/components/Package/TrendsChart.vue | 3 +++
 app/utils/input.ts                     | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index acb711c43..12e16784f 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -6,6 +6,7 @@ import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import { DATE_INPUT_MAX } from '~/utils/input'
 
 const props = defineProps<{
   // For single package downloads history
@@ -1468,6 +1469,7 @@ watch(selectedMetric, value => {
                 id="startDate"
                 v-model="startDate"
                 type="date"
+                :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
               />
@@ -1487,6 +1489,7 @@ watch(selectedMetric, value => {
                 id="endDate"
                 v-model="endDate"
                 type="date"
+                :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
               />
diff --git a/app/utils/input.ts b/app/utils/input.ts
index 5b55f3076..204ba4d75 100644
--- a/app/utils/input.ts
+++ b/app/utils/input.ts
@@ -26,3 +26,5 @@ export function isKeyWithoutModifiers(event: KeyboardEvent, key: string): boolea
     !event.shiftKey
   )
 }
+
+export const DATE_INPUT_MAX = '9999-12-31'