diff --git a/frontend/package.json b/frontend/package.json
index 18debd4..15bbfa9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mapdash-frontend",
   "private": true,
-  "version": "0.2.15",
+  "version": "0.2.16",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/datepicker.ts b/frontend/src/datepicker.ts
index a2b8467..cd57f18 100644
--- a/frontend/src/datepicker.ts
+++ b/frontend/src/datepicker.ts
@@ -2,8 +2,12 @@
 // #date-end) stay in the DOM (hidden) as the source of truth — all filter code
 // keeps reading/writing them. The calendar selects into a temporary state; the
 // filter is applied (and the popup closed) only when the user presses «Применить».
-// Both endpoints are chosen by clicking days; «Сбросить» clears the in-progress
-// selection.
+//
+// Two endpoint pills «С» / «По» sit above the grid: one is active, and clicking a
+// day writes into the active endpoint, then focus auto-advances to the other. Each
+// pill has a × to clear just that endpoint, so an OPEN range is possible — «с X»
+// (no end) or «по Y» (no start). «Применить» is enabled once at least one endpoint
+// is set; «Сбросить» clears both.
 
 const MONTHS = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
 const WEEKDAYS = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];
@@ -35,9 +39,11 @@ export function createDateRange(): DateRange {
 
   let viewY = new Date().getFullYear();
   let viewM = new Date().getMonth();
-  // In-progress selection (committed to the inputs only when both ends are set).
+  // In-progress selection (committed to the inputs on «Применить»). Either end may
+  // stay empty → an open range. `activeEnd` is the endpoint the next day-click fills.
   let selStart = '';
   let selEnd = '';
+  let activeEnd: 'start' | 'end' = 'start';
 
   function updateText(): void {
     const s = startInput.value;
@@ -53,7 +59,14 @@ export function createDateRange(): DateRange {
   function render(): void {
     const s = parseISO(selStart);
     const e = parseISO(selEnd);
+    const endPill = (which: 'start' | 'end', label: string, val: string): string =>
+      `<button type="button" class="dr-end${activeEnd === which ? ' active' : ''}${val ? ' set' : ''}" data-end="${which}">` +
+      `<span class="dr-end-lbl">${label}</span>` +
+      `<span class="dr-end-val">${val ? fmt(val) : '—'}</span>` +
+      (val ? `<span class="dr-end-x" data-clear="${which}" aria-label="Очистить">×</span>` : '') +
+      `</button>`;
     const parts: string[] = [
+      `<div class="dr-ends">${endPill('start', 'С', selStart)}${endPill('end', 'По', selEnd)}</div>`,
       `<div class="dr-cal-h"><button type="button" class="dr-nav" data-nav="-1" aria-label="Предыдущий месяц">‹</button>` +
       `<span class="dr-cal-title">${MONTHS[viewM]} ${viewY}</span>` +
       `<button type="button" class="dr-nav" data-nav="1" aria-label="Следующий месяц">›</button></div>`,
@@ -73,7 +86,7 @@ export function createDateRange(): DateRange {
       parts.push(`<button type="button" class="${cls}" data-iso="${iso}"><span class="dr-num">${d}</span></button>`);
     }
     parts.push('</div>');
-    const ready = !!(selStart && selEnd);
+    const ready = !!(selStart || selEnd); // at least one endpoint → applyable (open range OK)
     parts.push(
       '<div class="dr-foot">' +
       `<button type="button" class="dr-reset" data-act="reset">Сбросить</button>` +
@@ -93,16 +106,15 @@ export function createDateRange(): DateRange {
   }
 
   function pick(iso: string): void {
-    if (!selStart || (selStart && selEnd)) {
-      // start a fresh selection — first endpoint only
+    if (activeEnd === 'start') {
       selStart = iso;
-      selEnd = '';
-    } else if (iso >= selStart) {
-      // second endpoint — complete the range, but wait for «Применить»
-      selEnd = iso;
+      // Крест начала за концом — конец больше не валиден, очищаем его.
+      if (selEnd && selStart > selEnd) selEnd = '';
+      if (!selEnd) activeEnd = 'end'; // авто-переход к незаданному концу
     } else {
-      // clicked before the start — move the start (still one endpoint)
-      selStart = iso;
+      selEnd = iso;
+      if (selStart && selEnd < selStart) selStart = '';
+      if (!selStart) activeEnd = 'start';
     }
     render();
   }
@@ -110,7 +122,9 @@ export function createDateRange(): DateRange {
   function open(): void {
     selStart = startInput.value;
     selEnd = endInput.value;
-    const base = parseISO(selStart) || new Date();
+    // Start filling whichever endpoint is empty (start first).
+    activeEnd = !selStart ? 'start' : !selEnd ? 'end' : 'start';
+    const base = parseISO(selStart) || parseISO(selEnd) || new Date();
     viewY = base.getFullYear();
     viewM = base.getMonth();
     render();
@@ -154,14 +168,31 @@ export function createDateRange(): DateRange {
     const act = target.closest<HTMLElement>('[data-act]');
     if (act) {
       if (act.dataset.act === 'apply') {
-        if (selStart && selEnd) { applyRange(); close(); }
+        if (selStart || selEnd) { applyRange(); close(); }
       } else if (act.dataset.act === 'reset') {
         selStart = '';
         selEnd = '';
+        activeEnd = 'start';
         render();
       }
       return;
     }
+    // Clear one endpoint via its × (→ open range on that side). Checked before the
+    // pill activate below, since the × lives inside the pill button.
+    const clr = target.closest<HTMLElement>('[data-clear]');
+    if (clr) {
+      const which = clr.dataset.clear as 'start' | 'end';
+      if (which === 'start') selStart = ''; else selEnd = '';
+      activeEnd = which; // focus the emptied end for the next pick
+      render();
+      return;
+    }
+    const endBtn = target.closest<HTMLElement>('[data-end]');
+    if (endBtn) {
+      activeEnd = endBtn.dataset.end as 'start' | 'end';
+      render();
+      return;
+    }
     const day = target.closest<HTMLElement>('.dr-day');
     if (day && day.dataset.iso) pick(day.dataset.iso);
   });
@@ -173,7 +204,12 @@ export function createDateRange(): DateRange {
   return {
     sync(): void {
       updateText();
-      if (!cal.hidden) { selStart = startInput.value; selEnd = endInput.value; render(); }
+      if (!cal.hidden) {
+        selStart = startInput.value;
+        selEnd = endInput.value;
+        activeEnd = !selStart ? 'start' : !selEnd ? 'end' : 'start';
+        render();
+      }
     },
   };
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a31b2e8..a687458 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -144,6 +144,18 @@ header {
   box-shadow: var(--shadow-md); padding: 10px; font-variant-numeric: tabular-nums;
 }
 .dr-cal[hidden] { display: none; }
+/* Endpoint pills «С» / «По» above the calendar — styled like the active-filter
+   chips (accent-weak fill, accent text, pill shape); the active one (next click
+   target) gets an accent border; × clears just that endpoint. */
+.dr-ends { display: flex; gap: 8px; margin-bottom: 10px; }
+.dr-end { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 5px 4px 10px; border: 1px solid transparent; border-radius: 999px; background: var(--accent-weak); color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; text-align: left; }
+.dr-end:hover { border-color: var(--accent-ring); }
+.dr-end.active { border-color: var(--accent); }
+.dr-end-lbl { flex: 0 0 auto; opacity: .65; }
+.dr-end-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.dr-end:not(.set) .dr-end-val { opacity: .55; }
+.dr-end-x { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: inherit; font-size: 15px; line-height: 1; }
+.dr-end-x:hover { background: rgba(79, 70, 229, .18); }
 .dr-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
 .dr-cal-title { font-size: 13px; font-weight: 600; color: var(--text); }
 .dr-nav { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: var(--radius-sm); }