Date Range Filter with Start Date and End Date (Manual Entry + Calendar Picker)

Feature Request:

Add a native date range filter that allows users to define a Start Date and End Date, where each date can be entered manually or selected from a calendar picker—both methods available at all times.

Problem

Domo currently lacks a standard date range filter that supports precise and user-friendly date selection. Existing options rely on sliders, relative ranges, or quick filters, which:

Make exact date selection difficult
Require excessive scrolling for historical dates
Are unintuitive for non-technical users

There is no filter that supports both direct date entry and calendar-based selection for start and end dates, which is a baseline expectation in modern BI tools.

Requested Functionality

Provide a Date Range Filter with the following requirements:

Two required inputs:
- Start Date
- End Date
For each date:
- User can type a date directly into the field
- User can select a date from a calendar picker
Calendar picker:
- Uses a single-month view
- Supports month/year navigation
Filter applies at the dashboard level like other filter cards
Supports DATE and DATETIME fields
Supports default values and persistent selections

Expected Behavior

Data is filtered to values between Start Date and End Date
Manual entry and calendar selection stay synchronized
Validation prevents invalid ranges (e.g., End Date earlier than Start Date)

Business Value

Improves usability for business and executive users
Reduces reliance on Beast Modes, variables, and workarounds
Aligns Domo with standard UX patterns in enterprise analytics tools
Lowers training and support costs

Use Cases

Financial and accounting period analysis
Operational reporting with exact date requirements
Historical trend analysis
Executive dashboards requiring fast, precise filtering

Find more posts tagged with

Cards

Filters

Dashboard

Card Builder

Submitted and awaiting review from product team

Status: Submitted and awaiting review from product team

Quick Links

Comments

ArborRose

Save the following code with an html extension, then drag it up to your Chrome browser to see example.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <title>Date Range Filter Prototype</title>

  <style>

    body { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: #f6f6f6; padding: 40px; }

    .card { width: 380px; background: #fff; border: 1px solid #ddd; border-radius: 14px; padding: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

    .title { font-weight: 600; margin-bottom: 12px; }


    .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    label { font-size: 12px; color: #555; display:block; margin-bottom: 4px; }

    input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; font-size: 14px; }

    input.active { border: 2px solid #333; }


    .msg { margin-top: 8px; font-size: 12px; color: #666; }

    .msg.error { color: #b00020; }


    .calendar { margin-top: 14px; border-top: 1px solid #eee; padding-top: 12px; }

    .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

    .calendar-header button { background: none; border: 1px solid #ddd; border-radius: 8px; padding: 4px 8px; font-size: 14px; cursor: pointer; }


    .dow, .grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }

    .dow div { font-size: 12px; color: #666; margin-bottom: 4px; }


    .day { height: 34px; margin: 2px; border-radius: 8px; border: 1px solid #ddd; background: #fff; cursor: pointer; }

    .day.in-range { background: #f0f0f0; }

    .day.selected { border: 2px solid #333; font-weight: 600; }


    .footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

    .footer button { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; }

    .footer button.primary { background: #333; color: #fff; border-color: #333; }

    .footer button:disabled { opacity: 0.45; cursor: not-allowed; }

    .hintline { margin-top: 10px; font-size: 12px; color:#666; }

    code { background: #f3f3f3; padding: 1px 5px; border-radius: 6px; }

  </style>

</head>

<body>


<div class="card">

  <div class="title">Date Range Filter</div>


  <div class="inputs">

    <div>

      <label>Start Date</label>

      <input id="startInput" placeholder="YYYY-MM-DD" autocomplete="off">

    </div>

    <div>

      <label>End Date</label>

      <input id="endInput" placeholder="YYYY-MM-DD" autocomplete="off">

    </div>

  </div>


  <div id="message" class="msg">

    Tip: type <code>2025-05-01</code> or click a date. Active: start

  </div>


  <div class="calendar">

    <div class="calendar-header">

      <button id="prevMonth">◀</button>

      <div id="monthLabel" style="font-weight:600;"></div>

      <button id="nextMonth">▶</button>

    </div>


    <div class="dow">

      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>

    </div>


    <div id="calendarGrid" class="grid"></div>

  </div>


  <div class="footer">

    <button id="clearBtn">Clear</button>

    <button id="applyBtn" class="primary" disabled>Apply</button>

  </div>


  <div class="hintline">

    “Apply” simulates emitting a dashboard filter payload (check console).

  </div>

</div>


<script>

  const startInput = document.getElementById("startInput");

  const endInput = document.getElementById("endInput");

  const calendarGrid = document.getElementById("calendarGrid");

  const monthLabel = document.getElementById("monthLabel");

  const message = document.getElementById("message");

  const applyBtn = document.getElementById("applyBtn");


  let activeField = "start"; // "start" | "end"

  let startDate = null;

  let endDate = null;


  // Calendar cursor = first day of displayed month

  let cursor = new Date();

  cursor.setDate(1);


  function parseDateStrictYYYYMMDD(value) {

    const m = value.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);

    if (!m) return null;


    const y = Number(m[1]);

    const mo = Number(m[2]);

    const da = Number(m[3]);


    const d = new Date(y, mo - 1, da);

    // Guard overflow: 2025-02-31 becomes March 3, etc.

    if (d.getFullYear() !== y || d.getMonth() !== (mo - 1) || d.getDate() !== da) return null;

    return d;

  }


  function toISODate(d) {

    const y = d.getFullYear();

    const m = String(d.getMonth() + 1).padStart(2, "0");

    const da = String(d.getDate()).padStart(2, "0");

    return `${y}-${m}-${da}`;

  }


  function setCursorToDateMonth(d) {

    cursor = new Date(d.getFullYear(), d.getMonth(), 1);

  }


  function isValidRange() {

    return startDate && endDate && endDate.getTime() >= startDate.getTime();

  }


  function updateApplyEnabled() {

    applyBtn.disabled = !isValidRange();

  }


  function setMessage(text, isError=false) {

    message.textContent = text;

    message.className = isError ? "msg error" : "msg";

  }


  function validateAndRefreshMessage() {

    // Provide very explicit feedback

    if (!startDate && startInput.value.trim() !== "" && !parseDateStrictYYYYMMDD(startInput.value)) {

      setMessage("Start date is invalid. Use YYYY-MM-DD (e.g., 2025-05-01).", true);

      updateApplyEnabled();

      return;

    }

    if (!endDate && endInput.value.trim() !== "" && !parseDateStrictYYYYMMDD(endInput.value)) {

      setMessage("End date is invalid. Use YYYY-MM-DD (e.g., 2025-05-31).", true);

      updateApplyEnabled();

      return;

    }

    if (startDate && endDate && endDate < startDate) {

      setMessage("End date must be on or after Start date.", true);

      updateApplyEnabled();

      return;

    }


    setMessage(`Tip: type 2025-05-01 or click a date. Active: ${activeField}`);

    updateApplyEnabled();

  }


  function renderCalendar() {

    calendarGrid.innerHTML = "";


    const year = cursor.getFullYear();

    const month = cursor.getMonth();

    const firstDow = new Date(year, month, 1).getDay(); // 0=Sun

    const daysInMonth = new Date(year, month + 1, 0).getDate();


    monthLabel.textContent = cursor.toLocaleString("default", { month: "long", year: "numeric" });


    // Blank cells

    for (let i = 0; i < firstDow; i++) {

      calendarGrid.appendChild(document.createElement("div"));

    }


    // Day buttons

    for (let day = 1; day <= daysInMonth; day++) {

      const date = new Date(year, month, day);


      const btn = document.createElement("button");

      btn.type = "button";

      btn.className = "day";

      btn.textContent = String(day);


      // in-range highlight

      if (startDate && endDate && date >= startDate && date <= endDate) {

        btn.classList.add("in-range");

      }


      // boundary highlight

      if (startDate && toISODate(date) === toISODate(startDate)) btn.classList.add("selected");

      if (endDate && toISODate(date) === toISODate(endDate)) btn.classList.add("selected");


      btn.onclick = () => {

        if (activeField === "start") {

          startDate = date;

          startInput.value = toISODate(date);

          setCursorToDateMonth(date); // stay in view

          activeField = "end";

          endInput.focus();

        } else {

          endDate = date;

          endInput.value = toISODate(date);

          setCursorToDateMonth(date);

        }

        validateAndRefreshMessage();

        renderCalendar();

      };


      calendarGrid.appendChild(btn);

    }

  }


  function setActive(field) {

    activeField = field;

    if (field === "start") {

      startInput.classList.add("active");

      endInput.classList.remove("active");

    } else {

      endInput.classList.add("active");

      startInput.classList.remove("active");

    }

    validateAndRefreshMessage();

  }


  // Typing should set date AND jump calendar on full valid entry

  function handleTyping(which) {

    if (which === "start") {

      const d = parseDateStrictYYYYMMDD(startInput.value);

      startDate = d;


      if (d) setCursorToDateMonth(d);

    } else {

      const d = parseDateStrictYYYYMMDD(endInput.value);

      endDate = d;


      if (d) setCursorToDateMonth(d);

    }


    validateAndRefreshMessage();

    renderCalendar();

  }


  // Wire up events

  startInput.addEventListener("focus", () => setActive("start"));

  endInput.addEventListener("focus", () => setActive("end"));


  startInput.addEventListener("input", () => handleTyping("start"));

  endInput.addEventListener("input", () => handleTyping("end"));


  document.getElementById("prevMonth").onclick = () => {

    cursor = new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1);

    renderCalendar();

  };

  document.getElementById("nextMonth").onclick = () => {

    cursor = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);

    renderCalendar();

  };


  document.getElementById("clearBtn").onclick = () => {

    startDate = null; endDate = null;

    startInput.value = ""; endInput.value = "";

    setActive("start");

    renderCalendar();

  };


  applyBtn.onclick = () => {

    if (!startDate || !endDate) {

      setMessage("Please set both Start and End dates before applying.", true);

      return;

    }

    if (endDate < startDate) {

      setMessage("End date must be on or after Start date.", true);

      return;

    }


    const payload = {

      type: "DATE_RANGE",

      start: toISODate(startDate),

      end: toISODate(endDate),

      inclusive: true

    };


    console.log("FILTER EMITTED:", payload);

    alert(`Filter emitted:\nStart: ${payload.start}\nEnd: ${payload.end}\n\n(See console for payload)`);

  };


  // Init

  setActive("start");

  renderCalendar();

  validateAndRefreshMessage();

</script>


</body>

</html>

Idea Categories

Alerts ideas
Alerts Product Enhancement Ideas
Analyzer Ideas
Analyzer Product Enhancement Ideas
APIs Ideas
API Product Enhancement Ideas
Apps Ideas
Apps Product Enhancement Ideas
Appstore Experience ideas
Appstore product enhancement ideas
App Studio Ideas
App Studio Product Enhancement Ideas
Beast Mode Ideas
Beast Mode Product Enhancement Ideas
Buzz & Navigation Ideas
Buzz & Navigation Ideas
Charting Ideas
Charting product enhancement requests
Cloud Amplifier Ideas
Cloud Amplifier Product Enhancement Ideas
Code Engine Ideas
Code Engine Product Enhancement Ideas
Community ideas
Ideas or feedback for the Domo Community or the Community Forums.
Connectors Ideas
Connectors Product Enhancement Ideas
Dashboard Ideas
Dashboard Product Enhancement Ideas
Datasets Ideas
Datasets Produce Enhancement Ideas
Domo AI ideas
Domo AI Product Enhancement Ideas
Domo Bricks Ideas
Domo Bricks Product Enhancement Ideas
Domo Developer Ideas
Domo Developer Product Enhancement Ideas
Domo Everywhere Ideas
Domo Everywhere Product Enhancement Ideas
Federated Ideas
Federated Product Enhancement Ideas
Global Ideas
Product enhancement ideas for Domo as a whole
Governance & Security Ideas
Governance & Security Product Enhancement Ideas
Jupyter Workspaces Ideas
Jupyter Workspaces Product Enhancement Ideas
Localization ideas
Localization product enhancement ideas
Magic ETL Ideas
Magic ETL Product Enhancement Ideas
Mobile Ideas
Mobile Product Enhancement Ideas
Reporting Ideas
Reporting Product Enhancement Ideas
Sandbox Ideas
Product enhancement ideas for Sandbox
Software Integration Ideas
Software integrations product enhancement ideas
SQL Dataflows Ideas
SQL Dataflows Product Enhancement Ideas
Variables Ideas
Variables Product Enhancement Ideas
Workbench Ideas
Workbench Product Enhancement Ideas
Workflows Ideas
Workflows Product Enhancement Ideas
Other Ideas
Other Product Enhancement Ideas